Q:

CSS hover affecting other element - selector issue

I've read about elements affecting others using specified selectors ; I'm trying to achieve the grayscale hover effect , as follows : when hovering the tr.group class , the image should revert from grayscale , though in my example it doesnt. Any ways i can fix it ? Stating that i can't alter the html , needs to be css only solution . Thanks ! 
Demo : 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%);

}

A:

remove "+" :
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/

