在悬停中更改li元素上悬停的当前图像的背景

我使用一组元素来制作图像网格，并且需要在悬停在li中的每个图像时添加悬停效果。我得到它与CSS的不透明属性为.grid李正常工作：我设置了悬停。当我在这里设置背景图像时，它不显示。加载浏览器并使用检查器显示当我将鼠标悬停在图像上时加载的图像，但在视觉上它不显示。我试图设置更高的Z指数等，没有运气。在悬停中更改li元素上悬停的当前图像的背景

如果更好，我愿意这样做，因为每个图像都有自己不同的悬停状态。

HTML：

<div class="container"> 
<ul class="grid"> 
    <li><a href="link.html"><img src="images/image1.jpg"></a></li> 
    <li><a href="link.html"><img src="images/image2.jpg"></a></li> 
    <li><a href="link.html"><img src="images/image3.jpg"></a></li> 
</ul> 
</div>

CSS：

ul.grid { 
    list-style: none; 
    margin: 20px auto 0; 
    width: 798px; 
    } 

.grid li { 
    float: left; 
    margin: 0px 4px 0px 0px; 
    } 

.container { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top:50px; 
    width: 513px; 
    } 

.grid li a img:hover { 
    background: url(images/image1_hover.jpg) no-repeat; 
    } 

.grid li img { 
    background-color: white; 
    margin: 0; 
    width: 262px; 
    height: 200px; 
    } 

.grid li a { 
    display: block; 
    }

来源

2012-12-14 cibit

您遇到了与苹果和桔子的问题。你有橘子（背景）上的苹果（IMG）标签...所以改变背景是工作，但你的IMG坐在上面--Z指数不会帮助你。在这种情况下，单独使用背景图像。见下文。

编辑：我看到你也希望他们成为链接。以下内容适用于你。

这就是说，我实际上会使用一个精灵而不是在这种情况下有6个不同的图像。而且，下面的CSS可能会进行优化，并且可以肯定，通过小于或SASS优化 - 但它是近4上周五，该公司微丝锥流动;）

<html> 
<head> 
    <style type="text/css"> 
     ul.grid { 
      list-style: none; 
      margin: 20px auto 0; 
      width: 798px; 
     } 

     .grid li { 
      float: left; 
      margin: 0px 4px 0px 0px; 
     } 

     .container { 
      margin-left: auto; 
      margin-right: auto; 
      margin-top:50px; 
      width: 513px; 
     } 

     .grid li a { 
      background-color: white; 
      margin: 0; 
      width: 50px; 
      height:50px; 
     } 

     .grid li a { 
      display: block; 
      } 

     .img1 { 
      background: url(images/image1.jpg) no-repeat; 
     } 

     .img1:hover { 
      background: url(images/image1_hover.jpg) no-repeat; 
     } 

     .img2 { 
      background: url(images/image2.jpg) no-repeat; 
     } 

     .img2:hover { 
      background: url(images/image2_hover.jpg) no-repeat; 
     } 

     .img3 { 
      background: url(images/image3.jpg) no-repeat; 
     } 

     .img3:hover { 
      background: url(images/image3_hover.jpg) no-repeat; 
     } 
    </style> 
</head> 

<body> 
    <div class="container"> 
    <ul class="grid"> 
     <li><a href="link.html" class="img1"></a></li> 
     <li><a href="link.html" class="img2"></a></li> 
     <li><a href="link.html" class="img3"></a></li> 
    </ul> 
    </div> 
</body> 
</html>

来源

2012-12-14 23:37:49

您可以使用一些有一个更容易的时间jquery在鼠标悬停时更改图片的源标签。

来源

2012-12-14 23:42:13

在悬停中更改li元素上悬停的当前图像的背景

回答

相关问题