jquery - 当一个标题/图像悬停时将其他图像灰度化

Question

我正在为元素列表设计一个概览页面。我在页面上有元素的文本列表和该列表的缩略图。它们都出现在同一页上。我的目标是在悬停一个标题或图像时让所有其他缩略图变为灰度。

这是我的问题的工作 fiddle

fiddle 链接: http://jsfiddle.net/ka2Xs/6/

所以我的目标是:
1 - 当您将鼠标悬停在“名称 1”上时，它会变成红色。但是将鼠标悬停在“名称 1”上也会将除第一张图片之外的所有图片都变成灰度。

反之亦然:
2 - 将第一个图像悬停应该将所有其他图像变成灰度并且应该将“名称 1”变成红色。

当然，对其他图像和链接也执行相同的操作。 我希望它是这样清楚的。

img解释: http://img19.myimg.de/10f3cc.jpg

Answer 1

希望我对您的理解是正确的，如果您没有工作的 Fiddle，很难想象所有的需求 — 这里有一个针对您的大部分请求的快速示例，使用 jQuery :not 选择器和 CSS filter 属性:

Working example here

HTML

<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>

CSS

.thumb {
    background: maroon;
    display: inline-block;
    height: 200px;
    width: 200px;
}

.thumb.hover {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray; /* IE 6-9 */
}

jQuery

$('.thumb').on('mouseover', function(){
    $('.thumb').not($(this)).addClass('hover');
});

$('.thumb').on('mouseout', function(){
    $('.thumb').not($(this)).removeClass('hover');
});