html - Css 灰度并使用 :after 在其上设置图像

Question

有一张id为img1的图片，我需要在上面放一张id为img2的图片。当鼠标悬停在 #img1 上时，我需要它是黑白的，但 #img2 不应该是。

这是 JsFiddle Link .

它有效，但问题是当鼠标经过 #img2 时，grayScale 从 #img1

中移除

Answer 1

简单替换

img:hover {

在你的 CSS 中，使用:

div:hover img {

参见:

div:hover img {
  filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
  filter: grayscale(100%);
}

img {
  position: relative;
}

div {
  display: inline-block;
  position: relative;
}

div:after {
  background-image: url("http://sk.uploads.im/t/yJtie.png");
  top: 10px;
  background-repeat: no-repeat;
  right: 5px;
  position: absolute;
  display: inline-block;
  content: " ";
  width: 230px;
  height: 230px;
}

<div>
  <img src="http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg" />
</div>