javascript - 菜单悬停时屏幕变暗

Question

以下是我的 js fiddle，我在其中尝试创建一个熄灭效果，就像以下网站 bankalhabib.com 一样，问题是悬停在菜单上时，我的屏幕其余部分没有变暗，这是我真正想要的，而只是我想要的菜单变暗。

请告诉我如何解决此问题，以便达到与上述网站相同的效果？

谢谢，

http://jsfiddle.net/49Qvm/9/

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

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

Answer 1

我认为您最好的选择是为屏幕上的变暗效果创建一个元素。当您将鼠标悬停在 ul 元素上时，它会切换变暗元素的可见性。

您需要确保 ul 元素的 z-index 值高于提供变暗效果的元素(记住这一点! 在元素上设置 z-index 时，您需要确保将其 position CSS 属性设置为 relative，固定，或绝对)。

这是一个 fiddle :http://jsfiddle.net/49Qvm/28/