Question

我的图像背景有以下css代码，效果很好。

body {     
    background: url('/images/back.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

我在页面上有以下链接

<ul class='doIt'>
<li class='nav'></li>
<li class='nav'></li>
<li class='nav'></li>
</ul>

我需要的是当我将鼠标悬停在

元素上时，我希望在整页上发生以下css。

#back {
  position: fixed;
  background-color: black;
  height: 100%;
  width: 100%;
  margin: 0;
  padding:0;
  opacity: 0;
  display: none;
  z-index: 89;
}

简而言之，当li元素上的悬停用这个不透明度Id覆盖身体图像时。

我尝试过如下，但根本没有工作。

$('.nav').hover(function(){
    $('#back').show();  
    $('#back').animate({opacity: '0.5' }, 1000);  

  }, function() {
        $('#back').stop().animate({ opacity: 0 }, 500); 
        $('#back').hide(1);       
  });

有人请帮忙！

Answer 1

在您的示例中，您没有将back应用为id的元素，因此您的脚本在尝试查找该元素时失败。如果您没有将其包含在问题中，请提供一个最小的示例来查看（codepen或jsfiddle）但是，假设该元素存在，我只能假设，只要您悬停list-item ，该div与所有元素重叠，因为它具有更大的z-index值，因此您将失去悬停状态。

无论如何，没有必要使用javascript完成此任务：您可以在list-item悬停时为其定义一个巨大的半透明轮廓，例如http://codepen.io/anon/pen/GgZzPz

li:hover {
  outline: 999em rgba(0,0,0, .8) solid;
}

或者如果它看起来更合适，您可以在ul:hover上应用此样式。你也可以通过一个简单的css转换来显示它（例如持续时间为0.5秒，如你的例子所示）：

li {
  outline: 999em rgba(0,0,0, 0) solid;
  transition: outline .5s;
}

li:hover {
  outline-color:rgba(0,0,0, .8);
}

悬停在li元素上时更改背景的问题

1 个答案: