1

我已经解决了这个问题的一半，但已经陷入困境。我相信过去曾提出过类似的问题，但没有我想要的。

我目前在 jsFiddle 上有一些演示代码，可以在这里查看：http: //jsfiddle.net/WolfHook/jb36D/

HTML

<div id="thumbsContainer">
<div class="imageHolder">
    Image in Here...
</div>
<div class="imageHolder">
    Image in Here...
</div>
<div class="imageHolder">
    Image in Here...
</div>

CSS

#thumbsContainer {
background:#000;
padding:20px;
overflow:auto;}

.imageHolder {
background:#eee;
float:left;
margin:5px;
width:50px;
height:50px;
padding:5px;
border:1px solid #666;}

jQuery

$('#thumbsContainer').children('.imageHolder').hover(function() { $(this).siblings().stop().animate({'opacity':'0.5'}); }, 
function() { $(this).siblings().stop().animate({'opacity':'1'}); });

所需的效果是让所有 div 正常显示，然后一旦将鼠标悬停在 div 上，其他周围的 div 就会变灰或添加某种叠加层。目的是让您的鼠标指针所在的 div 突出显示。

您可以看到我在 jsFiddle 上的代码实现了这一点，但它对每个 div 应用了不透明度而不是某种覆盖，这就是导致我出现问题的原因，在我当前的项目中，div 位于背景图像上方而不是全黑背景，所以不透明度不会起作用，只会让整个事情看起来很混乱。

理想情况下，我想在未突出显示的 div 上应用 div 覆盖，我可以使用 CSS 设置样式以提供灰色效果。在这个阶段，我完全愿意接受有关如何达到预期效果的建议。

有哪位好心人来帮忙给我指点一下吗？

非常感激。

4

1 回答 1

1

与其对 imageHolder div 应用不透明度，或者引入一个新的覆盖元素，为什么不对 div 的内容（例如缩略图）应用不透明度呢？imageHolder 的背景颜色将显示出来，提供“变灰”效果的灰色。

新的：

$('#thumbsContainer').children('.imageHolder').hover(function() { 
    $(this).siblings().children('img').stop().animate({'opacity':'0.5'}); }, 
    function() { $(this).siblings().children('img').stop().animate({'opacity':'1'});
});

使用 imageHolders 内的缩略图和所有背景图像更新您的示例：http: //jsfiddle.net/jb36D/11/

于 2013-02-06T19:41:09.760 回答