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

Question

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

这是我的 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 class 灰度和无滤镜的代码：

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>

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

How to apply a CSS class to another element when an object is hovered?

html

css

class

filter

hover