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

灰显除活动悬停图像以外的所有图像

2 个答案: