将活动悬停图像以外的所有图像变灰

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

玩了之后现在解决了，这行得通。

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

Answer 2

为什么不换班？

编辑：现在兄弟姐妹会变成灰色

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