Question

以下是我的js小提琴，其中我试图创建一个轻盈的效果，如下面的网站bankalhabib.com，问题是，在悬停在菜单上我的其余屏幕没有变得昏暗，我真的想要而只是我的菜单越来越昏暗。

请让我知道我可以解决这个问题，这样我可以达到与上述网站相同的效果吗？

谢谢，

<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元素上时，它将切换变暗元素的可见性。

您需要确保z-index元素的ul值高于提供变暗效果的元素（请记住这一点！设置{{ 1}}在元素上，您需要确保将z-index CSS属性设置为position，relative或fixed）。

这是一个小提琴：http://jsfiddle.net/49Qvm/28/

Answer 2

试试这个利用z-index创建焦点效果的javascript / css。

<强> CSS

.link {
  z-index: 700;
  list-style-type: none;
  padding: 0.5em;
  background: black;
  display: inline-block;
  cursor: pointer;
  color: white;
}
.dim {
  width: 100%;
  height: 100%;
  z-index: -6;
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
}

body {
  background-color: orange;
}

<强>的jQuery

var $dim = $('.dim');
$('.link').hover(function(){
  $dim.fadeIn(200);
}, function(){
  $dim.fadeOut(200);
});

<强> HTML

<div class="dim"></div>
<ul>
  <div class="link"><li>Home</li></div>
  <div class="link"><li>Home</li></div>
  <div class="link"><li>Home</li></div>
  <div class="link"><li>Home</li></div>
</ul>

Some text here

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

Answer 3

我想也许这是一个范围问题。在函数的上下文中，“this”指的是函数而不是li元素。我曾经遇到过很多与此相关的问题。我的案例的解决方案是研究使用闭包来确保将类添加到正确的html元素。

在菜单上悬停昏暗的休息屏幕

3 个答案: