-5

请让我知道如何制作像以下网站一样的菜单悬停效果:

https://www.bankalhabib.com/

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

2 回答 2

4

我建议你使用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 小提琴演示

于 2013-04-02T14:19:10.897 回答
0

叠加效果

在感兴趣的网站 ( 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 细节以了解如何在另一种情况下实现它。

于 2013-04-02T14:49:00.820 回答