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.

Answer 1

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

Answer 2

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');
});

Answer 3

Try with "mouseenter" and "mouseleave" events.

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