除了使用 javascript/jquery/css 悬停的链接之外，如何为所有链接创建悬停效果？答案

【问题标题】：How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?除了使用 javascript/jquery/css 悬停的链接之外，如何为所有链接创建悬停效果？
【发布时间】：2014-02-28 20:35:17
【问题描述】：

我最近看到了一个非常有趣的效果，我想在网站的导航栏中创建。效果是悬停效果，用于菜单列表中的链接。而不是典型的“当您将鼠标悬停在链接上时更改链接”，它会更改除您悬停的链接之外的每个其他链接。在我看到的示例中，当您将鼠标悬停在列表中的一个链接上时，它对所有其他链接应用了不透明淡入淡出，使您悬停的链接保持完全不透明度。

现在我已经尝试了一些我查过的 css 东西，像这样：

.menu-link:a + .menu-link {opacity: 0.7;}

...但是这只是实现了它旁边的链接的效果，并不是所有的链接都具有相同的类。我假设这可以用 javascript 来实现，但我是个菜鸟，我想不通。

那么谁能帮我弄清楚如何在 jquery 或 javascript 中编写这样的快速函数？寻找悬停在具有特定类的对象上然后对具有该类的所有其他对象执行的效果（例如降低不透明度）的东西？感谢您的帮助！

编辑：好的，我被要求提供一些代码。这是我一直在处理的“链接菜单”，它们只是显示在页面顶部标题 div 中的一系列无序列表：

<div class="col-lg-2 col-md-2 menu-border">
                        <div class="menu-list">
                            <h4 class="list-title">Blog</h4>
                            <ul>
                                <li><a class="menu-link" href="#">Archive</a></li>
                                <li><a class="menu-link" href="#">Search</a></li>
                                <li><a class="menu-link" href="#">Tag Cloud</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 menu-border">
                        <div class="menu-list">
                            <h4 class="list-title">Profile</h4>
                            <ul>
                                <li><a class="menu-link" href="#">Artist Profiles</a></li>
                                <li><a class="menu-link" href="#">Submit A Profile</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-2 menu-border">
                        <div class="menu-list">
                            <h4 class="list-title">Connect</h4>
                            <ul>
                                <li><a class="menu-link" href="#">SoundCloud</a></li>
                                <li><a class="menu-link" href="#">linkedIN</a></li>
                            </ul>
                        </div>
                    </div>

它们只是几个子菜单；但是我已经给所有子菜单中的所有链接一个类（“menu-link”），我试图弄清楚如何制作一个功能，当将鼠标悬停在一个带有“menu-link”类的链接上时，所有与该类的其他链接做一些事情（在我的特殊情况下，我希望它们淡化到 > 1 的不透明度）

【问题讨论】：

您需要先提供一些代码。

标签： javascript jquery html css hover

【解决方案1】：

使用 jQuery，您可以执行以下操作：

jQuery

$('a.menu-link').hover(function(){
 $('a.menu-link').not(this).toggleClass('toggle');
})

CSS

.toggle {
  opacity: 0.7;
}

下面是它的实际操作：http://jsfiddle.net/HMq67/

使用toggleClass() 和not()，您可以更改不是您悬停的元素的每个元素的样式。

【讨论】：

不需要.each()。只需使用.not(this).toggleClass("toggle");
7 年后有同样的问题，发现这个，仅限 CSS：codepen.io/shshaw/pen/wWQZEB

【解决方案2】：

Give this jsFiddle 试一试。如果不出意外，它应该能让你继续前进。

本质上，您将需要 javascript 来侦听鼠标悬停和鼠标悬停事件。然后选择所有元素除了您当前悬停的元素。

$('nav li a').mouseover(function () {
    $('nav li a').not($(this)).addClass('hover');
});

$('nav li a').mouseout(function () {
    $('nav li a').not($(this)).removeClass('hover');
});

【讨论】：

谢谢。我没有足够的代表来投票，但这也有效，但我认为德莱顿的效率更高。但是，当我尝试自己学习更多内容时，我保留了这个示例。再次感谢您抽出宝贵时间。

【解决方案3】：

4 年后……哈哈。

您可以使用简单的 CSS 来实现这一点！

对于您在上面提供的代码，它看起来像这样：

.menu-list ul:hover .menu-link {
  opacity: 0.7;
}

.menu-list ul:hover .menu-link:hover {
  opacity: 1;
}

.menu-list ul li a {
  display: block;
}

小提琴：https://jsfiddle.net/fz6bumxx/6/

注意 - 我将每个列表项中的 a 标签设置为 block，这样您就无法触发链接淡入淡出将鼠标悬停在其中一个链接上。

希望这会有所帮助！

【讨论】：