Question

仅通过CSS，我希望你们可以帮助我实现以下行为：有三组（div类）; .green，.red和.blue。组内的图像设置为filter: grayscale(100%);。在悬停状态下，图像恢复其颜色（filter: grayscale(0%);）。

所以这就是我试图弄清楚的部分：如果图像在一个hoverstate上，我怎么能让它影响其中的剩余图像？

我已经整理了jsfiddle here。

Answer 1

我已将:hover州更改为家长

演示 - https://jsfiddle.net/gu6m1hae/5/

.green:hover img,
.red:hover img,
.blue:hover img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  filter: gray;
}`

Answer 2

<div class="green">
  <img src="http://i67.tinypic.com/2433fok.jpg"/>
  <img src="http://i67.tinypic.com/2433fok.jpg"/>
  <img src="http://i67.tinypic.com/2433fok.jpg"/>
</div>

<div class="red">
  <img src="http://i65.tinypic.com/fy1ieq.jpg"/>
  <img src="http://i65.tinypic.com/fy1ieq.jpg"/>
  <img src="http://i65.tinypic.com/fy1ieq.jpg"/>
  <img src="http://i65.tinypic.com/fy1ieq.jpg"/>
  <img src="http://i65.tinypic.com/fy1ieq.jpg"/>
  <img src="http://i65.tinypic.com/fy1ieq.jpg"/>
</div>

<div class="blue">
  <img src="http://i65.tinypic.com/sz7mnp.jpg"/>
  <img src="http://i65.tinypic.com/sz7mnp.jpg"/>
  <img src="http://i65.tinypic.com/sz7mnp.jpg"/>
  <img src="http://i65.tinypic.com/sz7mnp.jpg"/>
  <img src="http://i65.tinypic.com/sz7mnp.jpg"/>
  <img src="http://i65.tinypic.com/sz7mnp.jpg"/>
  <img src="http://i65.tinypic.com/sz7mnp.jpg"/>
</div>

img {  
  position:relative; 
  display:block; 
  float:left; 
  width:auto; 
  height:200px; 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  filter: grayscale(100%); 
  filter: gray;
}

div:hover img {  
 -webkit-filter: grayscale(0%); 
 filter: grayscale(0%); 
 filter: gray;
}

JSFIDDLE

将鼠标悬停在组中的图像上，可以在组内生成剩余的图像吗？

2 个答案: