jQuery .fadeTo()，如何淡化菜单内的非活动链接？答案

【问题标题】：jQuery .fadeTo(), how to fade not active links inside a menu?jQuery .fadeTo()，如何淡化菜单内的非活动链接？
【发布时间】：2011-08-06 22:48:43
【问题描述】：

我有一个 ul li 菜单，我只想制作带有 :hover 状态且不透明度为 1.0 的链接，其他的将设置为 0.5 之类的东西。因此，每次鼠标悬停在链接上时，它都会保持其不透明度 1.0，而其他鼠标的不透明度将更改为 0.5。在 jQuery 中是否有链接 !:focus、!:hover 或 !:active 的东西？我看到有 blur() 但我猜它不适合这种情况，因为我需要那些不活跃的而不是那些失去焦点的。

--已编辑-- 使用 :not() 而不是 .not() 效果更好。所以这是有效的：

        $('#menu > li > a').bind({
            mouseenter: function(){
                $('#menu > li > a:not(:hover)').fadeTo('slow', 0.5).stop(true,true);
            },
            mouseleave: function() {
                $('#menu > li > a').fadeTo('slow', 1.0).stop(true,true);
            }
        });

【问题讨论】：

所以最初所有链接的不透明度都是 1.0，当一个悬停时只有这个会保持不透明度，其他的会收到 0.5

标签： jquery menu opacity fadeto

【解决方案1】：

您可以将 not() 方法与 :focus、:hover 或 :active 选择器结合使用。

编辑：

~~或者，如果你愿意，你可以像下面这样使用 CSS working jsFiddle demo。~~

根据您的 cmets，这是您想要的：fade animated jsFiddle。

【讨论】：

哼！所以有一个 not() 但不是我想的那样。：）谢谢。我尝试学习如何使用它。第一次尝试没有成功。
@tenshimsm - 在我为 not() 制作你的 jsFiddle 之后，我编辑了我的答案 b/c，我想你为什么要为此使用 jQuery？ CSS 可以更轻松地做到这一点，并且是首选方式，因为它的开销更少。
其实我用CSS试过了，不是我想要的。处于正常状态（没有鼠标悬停）的链接必须是不透明度 1。不透明度 0.5 仅适用于未悬停的链接，悬停的链接保持 1.0 以突出显示它。
@tenshimsm - 哦，好的。我明白了。我已经用更新的 jsFiddle 编辑了我的答案。它使用悬停方法中的 not() 方法为不透明度设置动画。
嘿，这就是我想要的。我是用 :not() 而不是 .not() 做到的。

【解决方案2】：

嘿，你有没有尝试使用 .not()

应该是这样的：

$('a').not(':hover');

.not()

【讨论】：

$('a:not(:hover)') 替代