0

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


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

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

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

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

当然，其他图像和链接的操作相同。我希望像这样清楚。

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

4

2 回答 2

1

希望我能正确理解您，如果您没有使用 Fiddle，很难将所有需求可视化 - 这是您的大多数请求的快速示例:not，使用 jQuery选择器和 CSSfilter属性：

这里的工作示例

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');
});
于 2013-11-14T19:16:22.827 回答
0

我认为您的问题是关于如何链接悬停在您的链接上以对图像的选择进行相应的更改。使用 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，以便突出显示。还要编写悬停代码。

于 2013-11-14T19:30:04.070 回答