html - 如何在悬停对象时将 CSS 类应用于另一个元素？

Question

我有一个元素，用户需要将鼠标悬停在一个产品上，然后其他产品将有一个类来黑白过滤它们。我确实知道如何放置过滤器，但我需要的是当我将鼠标悬停在产品上时，它不会变成黑色和白色，但其他产品会被过滤。我该怎么办？

这是我的 html 代码:

<div id="wrapper">
 <ul>
  <li>
   <div><a href="#"><img class="grayscale" src="images/product1.png"/></a></div>
   <div><span class="product_text">sample product 1</span></div>
  </li>

  <li>
   <div><a href="#"><img class="grayscale" src="images/product2.png"/></a></div>
   <div><span class="product_text">sample product 2</span></div>
  </li>

  <li>
   <div><a href="#"><img class="grayscale" src="images/product3.png"/></a></div>
   <div><span class="product_text">sample product 3</span></div>
  </li>
 <ul>
</div>

这是我的类灰度和无滤镜的 CSS 代码:

img.grayscale:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: #666666;
  -webkit-filter: grayscale(100%);
}

img.grayscale {
  filter: none;
  -webkit-filter: grayscale(0%);
}

希望有人能帮助我。谢谢! :)

Answer 1

您不能通过将鼠标悬停在图像上来做到这一点。

您可以做的是当您将鼠标悬停在菜单上时将所有图像设为灰度，并从中移除灰度悬停的图像。

#wrapper ul:hover img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
#wrapper ul img:hover {
  -webkit-filter: none;
  filter: none;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}
#wrapper ul {
  list-style: none;
}
#wrapper ul li {
  display: inline-block;
}

<div id="wrapper">
  <ul>
    <li>
      <div>
        <a href="#">
          <img class="grayscale" src="http://www.fillmurray.com/140/100" />
        </a>
      </div>
      <div><span class="product_text">sample product 1</span>
      </div>
    </li>

    <li>
      <div>
        <a href="#">
          <img class="grayscale" src="http://www.fillmurray.com/140/100" />
        </a>
      </div>
      <div><span class="product_text">sample product 2</span>
      </div>
    </li>

    <li>
      <div>
        <a href="#">
          <img class="grayscale" src="http://www.fillmurray.com/140/100" />
        </a>
      </div>
      <div><span class="product_text">sample product 3</span>
      </div>
    </li>
    <ul>
</div>