使用jQuery突出显示div，同时使其他人变灰
我已经在这个问题的一半，但已经陷入困境。 我相信过去已经提出过类似的问题，但没有什么是我正在寻找的。
我目前在jsFiddle上有一些演示代码可以在这里查看： http ： //jsfiddle.net/WolfHook/jb36D/
HTML
Image in Here... Image in Here... Image in Here...
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，然后一旦将鼠标hover在div上，其他周围的div会变灰或添加某种叠加。 目的是给出印象，突出显示鼠标指针所在的div。
你可以看到我在jsFiddle上的代码实现了这个但它对每个div应用了一个不透明度，而不是某种叠加层，这就是导致我出现问题的问题，在我当前的项目中，div位于背景图像上方而不是全黑色背景所以不透明度不会起作用，只会使整个事情看起来令人困惑。
理想情况下，我想在unhighlighted div上应用div叠加，我可以使用CSS来设置灰色效果。 在这个阶段，我完全愿意接受有关如何达到预期效果的建议。
任何人都可以填写并提供一些指示？
非常感激。
不是将不透明度应用于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/