0

我使用一组 li 元素制作了一个图像网格，当您将鼠标悬停在 li 中的每个图像上时，需要添加悬停效果。我让它与我设置的 .grid li a 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;
  }
4

2 回答 2

0

您遇到的问题与苹果和橙子有关。您在橙子（背景）上放置了苹果（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>
于 2012-12-14T23:37:49.173 回答
0

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

于 2012-12-14T23:42:13.157 回答