灰掉除主動懸停圖像以外的所有圖像

Question

我試圖達到一個效果，我有6個圖像，所有這些都默認爲全綵色，但是當我將鼠標懸停在某個圖像上時，我希望圖像保持原樣但是所有其他5張圖片都會略微淡出。目的是突出用戶所在的圖像。

我有一個基本的 '懸停灰度' 在這裏設立JSFIDDLE

HTML

<a href="http://www.google.co.uk" target='_blank'><img src="http://s29.postimg.org/nkhruktyb/image.jpg"></a> 
<a href="http://www.google.co.uk" target='_blank'><img src="http://s29.postimg.org/8r349tm77/image.jpg"></a> 
    <a href="http://www.google.co.uk" target='_blank'><img src="http://s29.postimg.org/z8btp4j37/image.jpg"></a> 
     <a href="http://www.google.co.uk" target='_blank'><img src="http://s29.postimg.org/d6ljf2ylf/image.jpg"></a> 
      <a href="http://www.google.co.uk" target='_blank'><img src="http://s29.postimg.org/fg9npu7j7/image.jpg"></a> 
       <a href="http://www.google.co.uk" target='_blank'><img src="http://s29.postimg.org/bstwjrzc3/image.jpg"></a> 

CSS

img:hover { 
-webkit-filter: grayscale(100%); 
} 

讚賞任何幫助。

Answer 1

爲什麼不改變班級？

編輯：現在的兄弟姐妹會變成玩弄後灰

$('img').hover(function() { 
     $(this).siblings().toggleClass('grayscale'); 
}); 

Answer 2

現在解決了，這個工程。

HTML

<img src="http://s29.postimg.org/nkhruktyb/image.jpg" class="fade_hov"> 
<img src="http://s29.postimg.org/8r349tm77/image.jpg" class="fade_hov"> 
<img src="http://s29.postimg.org/z8btp4j37/image.jpg" class="fade_hov"> 
<img src="http://s29.postimg.org/d6ljf2ylf/image.jpg" class="fade_hov"> 
<img src="http://s29.postimg.org/fg9npu7j7/image.jpg" class="fade_hov"> 
<img src="http://s29.postimg.org/bstwjrzc3/image.jpg" class="fade_hov"> 

CSS

.fade_hov{ 
background: #fff; 
} 

.fade{ 
opacity: .5; 
} 

JS

$('.fade_hov').hover(function(){ 
        $(this).siblings().addClass('fade'); 
      }, function(){ 
        $(this).siblings().removeClass('fade'); 
      }); 

JSFIDDLE