Question

我使用一组li元素制作了一个图像网格，当你将鼠标悬停在li中的每个图像上时，需要添加一个悬停效果。我得到它与.grid li的一个img：hover我设置的css opacity属性正常工作。然而，当我在这里设置背景图像时，它没有显示。加载浏览器并使用检查器显示当我将鼠标悬停在浏览器上时加载的图像但是在视觉上它没有显示。我尝试将z指数设置得更高，但没有运气。

我愿意做更好的其他方式，因为每个图像都有自己不同的悬停状态。

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;
  }

Answer 1

你遇到的问题与苹果和橘子有关。你在橘子（背景）上面有苹果（IMG）标签...所以改变背景是有效的，但你的IMG坐在它上面 - z-index对你没有帮助。在这种情况下，单独使用背景图像。见下文。

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

那就是说，我实际上会使用精灵而不是在这种情况下有6个不同的图像。并且，下面的CSS可能会被优化，并且肯定会通过使用LESS或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>

Answer 2

当将鼠标悬停在图像上时，您可以更轻松地使用某些jquery来更改图像的源标记。

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

2 个答案: