Using jQuery, how do I target a child element in a parent object's hover state?

I have a bunch of list items, like so:

 <li>
     <a href="#" style="background:url('someImage.jpg')">
        <span class="wInfo">Hello World</span>
     </a>
 </li>

The anchor tag is actually a display:block element in CSS. The span class is a bit of text floating on top of an image. The text has a开发者_如何学编程 background-color of #000000. Now, using jQuery, I want to make a hover action for the anchor link, which changes wInfo's background-color to #ff0000.

My code isn't working, any ideas?

$('#work li a').hover(
   function(){
       $(this.find('.wInfo')).css({backgroundColor:'white'});
    },
    function(){
       $(this.find('.wInfo')).css({backgroundColor:'black'});
    }
);

It seems the most likely problem is a simple typo, it should be:

$('#work li a').hover(
   function(){
       $(this).find('.wInfo').css({backgroundColor:'white'});
    },
    function(){
       $(this).find('.wInfo').css({backgroundColor:'black'});
    }
);

Note the added closing parenthesis after this.

Why don't you just do it in css?

#work li a:hover .winfo {
    background-color: red;
}

You're close, but you're referencing the object incorrectly. $(this) will reference the current object that you are working with. In your code, your selector is $(this.find('.wInfo')), which is incorrect as you need to close the parentheses after this.

Try:

$(#work 'li a').hover(
   function(){
       $(this).find('.wInfo').css({backgroundColor:'white'});
    },
    function(){
       $(this).find('.wInfo').css({backgroundColor:'black'});
    }
);

When calling your event handler function(s) jQuery will set this to the actual element.

So try changing:

$(this.find('.wInfo')).css({backgroundColor:'white'});

to

$(this).find('.wInfo').css({backgroundColor:'white'});

When you say $(this) it will give you a jQuery object that you can use .find() on.