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

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

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

锚标记实际上是CSS中的display：block元素。 span类是一些浮在图像顶部的文本。文本的背景色为＃000000。现在，使用jQuery，我想对锚链接进行悬停操作，从而将wInfo的背景颜色更改为＃ff0000。

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

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

最佳答案

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

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

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

关于javascript - 使用jQuery，如何在父对象的悬停状态下定位子元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7142101/