jquery没有'；t设置所有选定元素的动画

我有一个带按钮的简单导航：

<ul class="nav">
    <a href="#" class="active">
        <li>Home</li>
    </a>
    <a href="#">
        <li>About</li>
    </a>
    <a href="#">
        <li>Products</li>
    </a>
    <a href="#">
        <li>Reviews</li>
    </a>
    <a href="#">
        <li>Contacts</li>
    </a>
</ul>

---

我的jquery函数只选择前3个a，而不对悬停时的其余部分设置样式。有人知道会出什么问题吗？所有a的位置都是相对的，所以我可以用不透明度设置它们的样式。

注释就是答案。我会澄清答案的

你必须把你的li包在你的a元素上，而不是你现在拥有的

然后将$（'ul a'）更改为$（'ul li a'）

---

或者更好地使用$（'ul'）.find（'li'）.find（'a'），这对jQuery来说是一个巨大的性能提升。

您的html结构是错误的。根据，

li

标签不允许在

建议:

你应该考虑使用CSS转换。它比Jquery轻得多。您只需添加以下内容即可解决问题：
ul a:hover {
    transition: 0.25s;
    opacity: 0.5;
}

请参见此处：
这是无效的html:
ul
的唯一有效子元素是
li
元素。
$（文档）。就绪（函数）{
是无效的语法即使这是无效的html，如果所有
a
都在
display:block
中，我也可以让它在chrome上工作。可能你的
a
元素有不同的
display
值。ul>li*5>a和$（“ul li”）。hover（）仍然没有选择所有元素（前3个）所以html不是问题，甚至css ul li:hover{}只选择前3个元素不，没有。你检查小提琴了吗？还有，你纠正了你的html结构了吗？是的，我纠正了。你可以在这里查看页面：tomimerachev.com/projects/epickids这是因为你有一个绝对定位的图像覆盖在第4和第5个
元素上，这就是它们没有响应鼠标的原因事件。OP的答案是正确的，你应该真正使你的HTML代码有效。此外，一个功能正常的小提琴会简单地告诉你网站上还有其他干扰元素/代码。这正是@Terry所回答的。如果你必须保留这张图片，你必须使你的
ul.nav
a
位置：相对
z索引
高于图像的索引。
<ul class="nav">
    <li><a href="#" class="active">Home</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Products</a>
    </li>
    <li>
        <a href="#">Reviews</a>
    </li>
    <li>
        <a href="#">Contacts</a>
    </li>
</ul>

$(document).ready(function(){
    $("ul a").hover(function(){
         $(this).animate({opacity:0.5},250);
    },function(){
         $(this).animate({opacity:1},250);
    });
});

ul a:hover {
    transition: 0.25s;
    opacity: 0.5;
}