Why does jQuery not work like CSS in terms of inheritance?

Question

This should be so simple:

$("a").hover(function () {
    $(this).stop().animate({color: "#00cc00"}, 'fast');
}, function () {
    $(this).stop().animate({color: "#939393"}, 'fast');
});

$(".footer_link").find("a").hover(function () {
    $(this).stop().animate({color: "#333"}, 'fast');
}, function () {
    $(this).stop().animate({color: "#939393"}, 'fast');
});

I'm telling my page to make all tags on hover change colour.

Then i'm giving a different rule for tags in a specific div.

I know if I do this in CSS, it will work. But in jQuery, the first rul overrides all rules.

It would be reallly cumbersome to find all the divs and spans that have tags and specify them all just so i can have one single tag do something different.

Am I doing something wrong here?

You can see it here: http://baked-beans.tv (the footer is where things are not working as they should.

Answer 1

It does sort of work like CSS in this case, since you're using .stop() and binding later with the second (since the second will stop the first).

However, it at least appears to me that your selector is off, class="footer_link" doesn't appear anywhere, I think what you'are after is this instead:

$("#footer").find("a").hover(function(){
  $(this).stop().animate({color: "#333"}, 'fast');
}, function(){
  $(this).stop().animate({color: "#939393"}, 'fast');
});

Note that this still isn't very efficient since you're binding 2 handlers for the same thing, it'd be better to not bind all <a> elements from the start.

Answer 2

$(".footer_link").find("a").hover(function () {
    $(this).stop().animate({color: "#333"}, 'fast');
    $(this).stopPropagation();
}, function () {
    $(this).stop().animate({color: "#939393"}, 'fast');
    $(this).stopPropagation();
});

Does this make a trick? In jQuery you add events, not properties, so you end up with 2 events on 1 item, the above solution should execute the first event and $(this).stopPropagation();, stopping event propagation. Demo

The best solution in this case is not to register events on the elements twice and filter out .footer_link anchors in your first statement using .not() or .filter().

Answer 3

I would suggest this:

$(".footer_link").find("a").unbind('mouseenter mouseleave').hover(yourhoverfunctions)

By that you first unbind the hover bound to

.footer_link a