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

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>

它们只是几个子菜单； 但是我给所有子菜单中的所有链接都指定了一个类（“菜单链接”），并且我试图弄清楚如何将一个函数悬停在“菜单链接”类的一个链接上，与该类的其他链接做某事（在我特定的情况下，我希望它们淡化为> 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

试试这个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标签设置为阻止，以便您不将鼠标悬停在链接之一上就不会触发链接淡入。

希望这可以帮助！