5

以下是我的 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');
});
4

3 回答 3

15

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

您需要确保该元素的z-index值ul高于提供变暗效果的元素（记住这一点！在设置z-index元素时，您需要确保将其positionCSS 属性设置为relative、fixed或absolute）。

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

于 2013-04-05T18:40:52.550 回答
5

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/

于 2013-04-05T19:01:42.767 回答
0

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

于 2013-04-05T18:36:17.640 回答