Наведение CSS на другой элемент - проблема с селектором

Question

Я читал об элементах, влияющих на других, используя указанные селекторы; Я пытаюсь добиться эффекта наложения оттенков серого, как показано ниже: при наведении класса tr.group изображение должно возвращаться из оттенков серого, хотя в моем примере это не так. Как я могу это исправить? Заявив, что я не могу изменить html, должно быть только решение css. Благодаря !

Демо: http://jsfiddle.net/hg3rgps7/2/

tr.group:hover + .group_image img{ 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    -webkit-filter: grayscale(0%); 

} 

Answer 1

удалить "+":

tr.group:hover .group_image img{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
     -webkit-filter: grayscale(0%); 

http://jsfiddle.net/hg3rgps7/3/