小编use*_*230的帖子

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

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

它们只是几个子菜单; …