菜单悬停效果点亮整个休息页面[关闭]

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 的详细信息以了解如何在另一种情况下实现它。