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

【问题标题】：Change background of li element on hover that has a current image in li在 li 中具有当前图像的悬停时更改 li 元素的背景
【发布时间】：2012-12-02 23:39:36
【问题描述】：

我使用一组 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;
  }

【问题讨论】：

标签： css hover html-lists image

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：