Question

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

这是我的问题的工作小提琴

Link to fiddle: http://jsfiddle.net/ka2Xs/6/

所以我的目标是：
1 - 当您将鼠标悬停在“名称1”上时，它会变为红色。但是，将鼠标悬停在“名称1”上也应将所有图像转换为灰度，除了第一张图像。

反之亦然：
2 - 悬停第一张图像应将所有其他图像变为灰度，并将“名称1”变为红色。

当然，对于其他图像和链接也是如此。我希望这样清楚。

img说明： http://img19.myimg.de/10f3cc.jpg

Answer 1

希望我能正确理解你，没有工作的小提琴，你很难想象所有的要求 - 这是你的大多数请求的快速示例，使用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');
});

Answer 2

我认为您的问题是关于如何链接链接上的悬停以对图像进行相应的选择更改。使用jquery很容易：

$('#sub-menu').find('a').hover(function(){
    var index =$('a').index($(this)); // this will get you the index of the link that is hovered on
    $('img').eq(index).css('opacity', 1); // this find find the image at the corresponding index and change its opacity to 1.
});

您可以将其余图像的不透明度设为0.1，以便突出显示。还要编写悬停的代码。

当一个标题/图像悬停时，将其他图像变为灰度

2 个答案: