使活动悬停图像以外的所有图像变灰 [英] Grey out all images other than active hover image

问题描述

我正在尝试实现一种效果，即我有6张图像，默认情况下所有这些图像都是全彩色的，但是当我将鼠标悬停在一张图像上时，我希望该图像保持原样，而其他所有5张图像都消失稍微出来.目的是突出显示用户悬停在其上的图像.

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.

我在这里设置了基本的悬停灰度" JSFIDDLE

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

任何帮助表示赞赏.

推荐答案

为什么不更改类?

现在兄弟姐妹会变成灰色

Now the siblings will turn grey

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

这篇关于使活动悬停图像以外的所有图像变灰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！