Наведите указатель мыши на изображение в группе, эффект оставшихся изображений внутри группы?

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