Question

请告诉我如何制作菜单悬停效果，如下面的网站：

https://www.bankalhabib.com/

<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>

Answer 1

我建议您使用addClass()和CSS：

$('li').hover(function(){
    $(this).addClass('hovered');
},function(){
    $(this).removeClass('hovered');
});

这要求您添加CSS规则以设置不透明度的样式：

ul:hover li {
    opacity: 0.4;
}

ul li.hovered {
    opacity: 1;
}

JS Fiddle demo

顺便说一下，如果你可以展示一些努力你可能已经解决了自己的问题，那么你可能不会得到那么多的下选票。它确实读作需求，而不是当前写的问题。

当然，您可以使用简单的CSS：

ul:hover li {
    opacity: 0.4;
}

ul li:hover {
    opacity: 1;
}

JS Fiddle demo

Answer 2

叠加效果

在感兴趣的网站（https://www.bankalhabib.com/）上，当您将鼠标悬停在导航链接上时，页面会变暗/变暗，例如“主页”。

此效果是以下元素的结果：

<span class="overlay" style="height: 2464px; display: none;"></span>

默认隐藏（display: none）。

通过以下jQuery操作使该元素可见（在：js / custom_js.js中找到）：

/*Over Lay Display controll in bottom*/
$(document).ready(function() {
$(" ul.mainNav li.home").mouseover(function() {
$(".overlay").css({'display':'block'});
$(" ul.mainNav").css({'z-index':'8'});
$(" .dropDown").css({'z-index':'8'});
})
});

诀窍很简单，分两步。

（1）显示overlay元素

（2）更改导航元素的z-index和dropDown类，以便在叠加层上方显示菜单。

叠加层比网站的其他部分更靠近视图（z-index更高），因此除了沿z轴向上移动的导航元素外，其背景颜色会掩盖/调暗网站的其余部分。

既然你知道要查找什么，你可以学习CSS和jQuery细节，以了解如何在另一种情况下实现它。

菜单悬停效果可以点亮整个休息页面

2 个答案: