Question

有一个ID为rgb2cmyk $ Rgb的图片，我需要在其上放置另一个ID为img1的图片。当鼠标悬停在img2上时我需要它是黑白色的，但#img1不应该是。

它有效，但问题是当鼠标移过#img2时，灰度已从#img2

移除

Answer 1

简单地替换

img:hover {

在你的css中，有：

div:hover img {

请参阅：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

伪元素位于图像顶部，阻挡了图像的悬停。

可以通过将pointer-events: none应用于伪元素

来解决此问题

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;
  pointer-events:none;
}

JSfiddle Demo

然而，最简单的解决方案是更改CSS，以便效果发生在div而不是图像上。

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%);
}

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>

Answer 3

HTML代码：

<div>
  <img src="http://www.xenergie.com/wp-content/uploads/2015/05/nature.jpg" class="hoverImg" />
  <img src="http://sk.uploads.im/t/yJtie.png" class="absoluteImg" />
</div>

CSS代码：

img {
  position: relative;
}
div {
  display: inline-block;
  position: relative;
  z-index: 1;
}
div:hover .hoverImg {
  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%);
}
.absoluteImg {
  top: 10px;
  right: 5px;
  position: absolute;
  z-index: 2;
}

使用Css灰度和在其上设置图像：after

3 个答案: