Question

我试图在我的网络应用程序中使用此demo但不知何故我无法获得我想要的结果。

我希望当鼠标结束时文本会改变颜色。这是我到目前为止所做的。

HTML代码如下：

<body>
<div id="menu"> 
       <ul>
          <a href="#"><li>AAA</li></a>
          <a href="#"><li>BBB</li></a>
          <a href="#"><li>CCC</li></a>
          <a href="#"><li>DDD</li></a>
        </ul>
</div>
</body>

我的JQuery代码：

$(function(){
        $('li').hover(function(){
            $(this).addClass('highlight');
        }, function(){
            $(this).removeClass('highlight');
        });
 });

我的CSS代码：

.highlight{
    color:green;
}

有什么想法吗？

我的Fiddle.

Answer 1

问题是因为您的HTML无效 - a元素必须位于li内：

<ul>
    <li><a href="#">AAA</a></li>
    <li><a href="#">BBB</a></li>
    <li><a href="#">CCC</a></li>
    <li><a href="#">DDD</a></li>
</ul>

$('li a').hover(function () {
    $(this).addClass('highlight');
}, function () {
    $(this).removeClass('highlight');
});

Working example

请注意，您的小提琴不包含jQuery，您还可以使用toggleClass()缩短代码：

$('li a').hover(function () {
    $(this).toggleClass('highlight');
});

为什么悬停不适用于JQuery

1 个答案: