如何为所有链接创建悬停效果除了你使用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()您可以更改不是您正在悬停的元素的每个元素的样式.