Jan Šimerda Jan Šimerda - 20 days ago 6
Javascript Question

mouseover is not a function

I am trying to add a class to a specific div after hovering over an item in the navigation. I am using jQuery 3.1.1 from a CDN. And I am getting a

not a function error
. Here's the code:

$(document).ready(function(){
var navigation = $("nav ul#primary-menu li");
var brands = $("div.brands > div");

navigation[0].mouseover(function() {
brands[0].addClass("hovered");
});

navigation[1].mouseover(function() {
brands[1].addClass("hovered");
});

navigation[2].mouseover(function() {
brands[2].addClass("hovered");
});

navigation[5].mouseover(function() {
brands[3].addClass("hovered");
});
});


Got any ideas?

Answer

navigation[0] is not an jQuery object, it's pure html element

to access jQuery methods, you have to use navigation.eq(0) instead (same goes with brands)