mouseover is not a function

Question

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?

because that is not jQuery, it is a DOM you are working with.... Makes no sense why you would be doing that... `navigation.on("mouseover", function(){ $(this).addClass("hovered"); });` — epascarello, Nov 17 '16 at 20:53
Accessing a jQuery object via index through bracket notation returns the underlying DOMElement. Hence, no `mouseover` or `addClass` functions available. Use `eq()`. However a better solution entirely would be to use DOM traversal with a single event handler. — Rory McCrossan, Nov 17 '16 at 20:54
Why does `navigation[5]` add the class to `brands[3]` instead of `brands[5]`? — Barmar, Nov 17 '16 at 20:59
@Barmar That's because i'll have expanded menu for 1st, 2nd, 3rd and 6th item in the nav. And I have 4 divs for those items. — Jan Šimerda, Nov 17 '16 at 21:04
OK, thank you everybody, didn't know, I have to use the eq() function. I thought that I can use just braces just like in this answer: [link](http://stackoverflow.com/questions/1302428/what-does-jquery-actually-return#answer-1302443) — Jan Šimerda, Nov 17 '16 at 21:07

score 2 · Accepted Answer · answered Nov 17 '16 at 20:54

2

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)

answered Nov 17 '16 at 20:54

pwolaq

6,343
19
45

Barmar · Answer 2 · 2016-11-17T21:09:01.760

0

Assuming navigation[5] is a typo for navigation[3], there's no reason to repeat all those mouseover bindings. Make use of .index() and .eq() in a single handler to refer to the corresponding element of the other collection.

navigation.mouseover(function() {
    brands.eq($(this).index()).addClass("hovered");
});

If the relationship between the li that you mouse over and the div that gets the class is not as simple as this, you could put an attribute into the li that tells it which DIV to highlight.

<li data-rel="divid">

Then the handler would look like:

navigation.mouseover(function() {
    var div = $(this).data("rel");
    if (div) {
        $("#" + div).addClass("hovered");
});

This is better (IMHO) than hard-coding the indexes into your Javascript.

edited Nov 17 '16 at 21:09

answered Nov 17 '16 at 21:02

Barmar

741,623
53
500
612

I am using the dynamic menu from wordpress. Not just a plain HTML so I can't really add that attribute. But thank's for your answer. – Jan Šimerda Nov 17 '16 at 21:17
I don't use wordpress, but I'll bet there's some way to add custom attributes. – Barmar Nov 17 '16 at 21:23

score 0 · Answer 3 · answered Nov 17 '16 at 21:34

The element selector can also be used to select multiple elements like in the example below, and the mouseover event occurs when the mouse pointer is over the selected element. In this case on any paragraph element

$("p").mouseover(function(){
  $("h2, div, span").css("background-color", "yellow");
});
$("p").mouseout(function(){
  $("h2, div, span").css("background-color", "lightgray");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Welcome to My Web Page</h1>
<h2>Nice to meet you</h2>

<div>Very nice indeed.</div>

<p>How are you?</p>
<p>I'm fine, <span>thanks.</span></p>

mouseover is not a function

3 Answers3