悬停对象时如何将 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>