Question

我已经在这个问题的一半，但已经陷入困境。我相信过去已经提出了类似的问题，但没有什么是我正在寻找的。

我目前在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位于背景图像之上而不是一个完整的黑色背景，所以不透明度不起作用，只是让整个事情看起来很混乱。

理想情况下，我想在unhighlighted div上应用div叠加，我可以使用CSS来设置灰色效果。在这个阶段，我完全愿意接受有关如何达到预期效果的建议。

任何人都可以填写并提供一些指示？

非常感谢。

Answer 1

为什么不对div的内容（例如缩略图）应用不透明度，而不是将不透明度应用于imageHolder 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/

使用jQuery突出显示div，同时使其他人变灰

1 个答案: