jQuery on hover event does not work

Question

I have a site where I have some divs with hidden divs inside. What I am trying to do is to show the hidden divs when I hover over the parent div. I can't use CSS3's :hover because I need to support ie6. So I used jquery. which does not work for me.

Here is an example: JSFiddle

$('#front-container').on("hover", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});

And this is how it should look on hover: JSFiddle

The #jobs-by-cat div is dynamically changed so the selection must be made like that.

Arun P Johny · Accepted Answer · 2013-10-30 12:49:29Z

4

There is no event called hover, the .hover() function is a shortcut to register mouseenter and mouseleave event handlers, so you need to use it

$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});

Demo: Fiddle

answered Oct 30, 2013 at 12:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodingIntrigue · Accepted Answer · 2013-10-30 12:52:12Z

1

As per the jQuery docs for .on:

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions

So you need to replace with mouseenter and mouseleave events:

$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});

answered Oct 30, 2013 at 12:52

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Comments

saeta · Accepted Answer · 2013-10-30 12:58:24Z

0

Try with "mouseenter" and "mouseleave" events.

$('#front-container').on("mouseenter mouseleave", "#jobs-by-cat .job", function () {
    $(this).find('.hover').toggleClass('hidden');
});

answered Oct 30, 2013 at 12:58

saeta

4,2582 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery on hover event does not work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related