javascript - 使用 jQuery，如何定位父对象悬停状态中的子元素？

Question

我有一堆列表项，像这样:

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

anchor 标签实际上是CSS中的一个display:block元素。 span 类是一些漂浮在图像顶部的文本。文本的背景色为#000000。现在，我想使用 jQuery 对 anchor 链接进行悬停操作，这会将 wInfo 的背景色更改为#ff0000。

我的代码不工作，有什么想法吗？

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

Answer 1

看来最有可能的问题是一个简单的错字，应该是:

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

请注意在 this 之后添加的右括号。