jQuery Hover on <li>

Question

Hi,

I have a list of elements like

<ol>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<li class="blah">some text <a href=#">test</a></li>
<ol>

I want to add a hover element so when the user hovers over the <li> then only that items <a> hovers.

I have this (where hover-enabled is just a color)

jQuery('ol li').hover(function () {
    jQuery('ol li.blah a').addClass('hover-enabled');
}, function () {
    jQuery('ol li.blah a').removeClass('hover-enabled');
});

It works but ALL of the <a> items hover - not just the individual <li>. Any ideas ?

Answer 1

it's because in your example you are referencing all of them, you instead want to use this.

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});

Answer 2

use this instead:

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});

Answer 3

Because that ol li.blah a selector is true for all of the list items a elements.

This is assuming you want the class applied to the a element and not the li element.

jQuery('ol li').hover(function () {
    jQuery("a", this).addClass('hover-enabled');
}, function () {
    jQuery("a", this).removeClass('hover-enabled');
});

If you want the li to have the class then use:

jQuery('ol li').hover(function () {
    jQuery(this).addClass('hover-enabled');
}, function () {
    jQuery(this).removeClass('hover-enabled');
});