CSS滤镜“灰度”在图像悬停时无效。

Question

我试图使用CSS将image从彩色转换为黑白。但它没有出现在另一个

的顶部。

我的代码如下所示：

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center img:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive">

  </div>
</div>

示例测试链接 https://jsfiddle.net/rijo/29eo2kkL/1/

- Rijo

---

FF v54。我看到了灰色的图像，当鼠标悬停时它就变成了彩色的。这是怎么回事？ - Justinas

如果您将鼠标悬停在文本div上，它不起作用，为什么？如何解决？ - Rijo

Answer 1

将 :hover 应用于包装器而不是图像：

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center:hover img {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive">

  </div>
</div>

- Justinas

---

你能解释一下为什么会发生这种情况吗？它应该也适用于img标签，对吧？还是与display属性有关？ - Abhimanyu

Answer 2

您可以根据另一个元素的 hover 触发另一个元素上的效果。就像这样。

.home-center-text:hover ~ .home-center-img 
{  /* Do stuff here */ }

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center-img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center-img:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

.home-center-text:hover ~ .home-center-img {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive home-center-img">

  </div>
</div>

基于此答案。

- Rithwik

Answer 3

在包装器上使用:hover而不是img：

.home-center:hover img{
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
} 

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center:hover img{
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive">

  </div>
</div>

- Ehsan