请让我知道如何制作像以下网站一样的菜单悬停效果:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>
请让我知道如何制作像以下网站一样的菜单悬停效果:
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>
我建议你使用addClass()
和 CSS:
$('li').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
这需要您添加 CSS 规则来设置不透明度的样式:
ul:hover li {
opacity: 0.4;
}
ul li.hovered {
opacity: 1;
}
顺便说一句,如果你能表现出你在解决自己的问题上可能付出的一些努力,你可能不会得到那么多反对票。它确实读作一种需求,而不是目前写的一个问题。
当然,您可以使用简单的 CSS:
ul:hover li {
opacity: 0.4;
}
ul li:hover {
opacity: 1;
}
叠加效果
在感兴趣的网站 ( 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 细节以了解如何在另一种情况下实现它。