Grey out all images other than active hover image

问题

I'm trying to achieve an effect whereby I have 6 images, all of which are in full colour by default but when I hover on one, I want that image to stay as it is but all the other 5 images to fade out slightly. The purpose being to highlight the image the user is hovered on.

I have a basic 'grayscale on hover' set up here 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%);
}

Any help appreciated.

回答1:

Now resolved after playing around, this works.

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;
}

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

JSFIDDLE

回答2:

Why not change the class?

Edit: Now the siblings will turn grey

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

来源：https://stackoverflow.com/questions/20953264/grey-out-all-images-other-than-active-hover-image

标签

hover