javascript - 菜单悬停效果点亮整个休息页面

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 小提琴演示。

顺便说一句，如果你能表现出你在解决自己的问题上可能付出的一些努力，你可能不会得到那么多反对票。它确实读作一种需求，而不是目前写的一个问题。

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

ul:hover li {
    opacity: 0.4;
}

ul li:hover {
    opacity: 1;
}

JS 小提琴演示。

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导航元素和下拉类的设置，使菜单在覆盖层上方可见。

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

现在您知道要查找什么，您可以研究 CSS 和 jQuery 细节以了解如何在另一种情况下实现它。