CODEWITHSUNDEEP
jqueryhover
Fikri
Fikri

Reputation: 11

jQuery hover not working

When I try this.

<ul id="sub_navigation"><li>A</li><li>B</li></ul>

with jQuery hover like this

$(function() {
    $('#sub_navigation').hover(function() {
        $(this).addClass('hovered');
    },
    function() {
    $(this).removeClass('hovered');
    });

   alert($('#sub_navigation').is('.hovered'));

});

always return false when I hover at sub_navigation.

there is something wrong?

thanks

Upvotes: 0

Views: 1576

Answers (1)

Nick Craver
Nick Craver

Reputation: 630627

Returning false is normal here, since you're alerting when the page loads, instead of when you hover. For example this would return true:

$(function() {
    $('#sub_navigation').hover(function() {
        $(this).addClass('hovered');
        alert($('#sub_navigation').is('.hovered'));
    }, function() {
        $(this).removeClass('hovered');
    });
});

You can test it here.

Keep in mind though, if you're doing this just for styling, using the :hover CSS pseudo-class will work in all browsers except IE6 here (with no JavaScript):

#sub_navigation:hover { color: red; }

Test it out here.

Upvotes: 3

Related Questions