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

我有以下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> 

简而言之，当鼠标悬停在li元素上时，使用此不透明度Id覆盖身体图像

我试过以下方法，但根本不起作用

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

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

---

请找人帮忙

在您的示例中，没有应用了

back

作为id的元素，因此脚本在尝试查找该元素时失败。如果您没有将其包括在问题中，请提供一个最简单的示例（codepen或jsfiddle），但是，假设元素存在，我只能假设，只要您悬停

列表项

，div就会由于其更大的

z-index

值而与所有元素重叠，因此您将失去悬停状态

无论如何，这个任务不需要使用javascript：当列表项悬停时，您可以为它定义一个巨大的半透明轮廓，例如

或者您也可以将此样式应用于

ul:hover

，如果它更适合您。您还可以通过简单的css转换来显示它（例如，

0.5

秒的持续时间，如您的示例所示）：

---

看看CSS转换；他们可能会让你的世界变得更简单：什么是

#back

？你能举个例子吗？我怀疑。OP是

show（）

ing

#back

所以它不会是

body

。#back是一个div元素，当JS调用它时，它会覆盖页面。问题似乎是页面上有很多元素，在z-index中很难处理。我希望我能让Jquery代码工作，因为我的布局很复杂，这可能吗？您需要使用最少的代码共享一个链接，包括您的

#back

元素。不管怎么说，这个元素有一个很好的

z-index

，所以我假设只要你悬停列表项，div就会覆盖所有元素，这样你就失去悬停状态

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

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

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

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

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