Question

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

现在我已经尝试过一些我喜欢的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>

它们只是几个子菜单;但是我给了所有子菜单中的所有链接一个类（“菜单链接”），我试图找出如何使用“菜单链接”类将鼠标悬停在一个链接上的所有功能与该类的其他链接做某事（在我的特定情况下，我希望它们淡化为＆gt; 1不透明度）

Answer 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()，您可以更改不您所悬停的元素的每个元素的样式。

Answer 2

尝试{p> Give this jsFiddle。如果没有别的，它应该让你去。

从本质上讲，您需要使用javascript来监听mousover和mouseout事件。然后选择除当前悬停的那些元素之外的所有元素。

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

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

Answer 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 标记设置为阻止，以便您无法触发链接在没有悬停在其中一个链接上的情况下消失。

希望这有帮助！

如何为所有链接创建悬停效果除了你使用javascript / jquery / css悬停的那个？

3 个答案: