使用jQuery突出显示div，同时使其他人灰掉 [英] Using jQuery to highlight a div, whilst greying out others

问题描述

我在这个问题的一半，但已成为卡住。我相信过去也曾出现过类似的问题，但没有什么比我想要的要好。

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

HTML

 < div id =thumbsContainer> 
< div class =imageHolder> 
图片在这里... 
< / div> 
< div class =imageHolder> 
图片在这里... 
< / div> 
< div class =imageHolder> 
图片在这里... 
< / 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上，其他周围的灰色或有某种叠加添加到他们。您可以看到我在jsFiddle上的代码实现了这一点，但它将不透明度应用于每个div而不是某种覆盖，这就是导致我出现问题的原因，在我目前的项目中divs坐在背景图片上方，而不是全黑背景，所以不透明度不起作用，并且使整个事物看起来令人困惑的。

理想情况下，我想在不高亮的div上应用div覆盖，并且我可以使用CSS来设置灰色效果。在这个阶段，我完全接受有关如何达到预期效果的建议。

任何人都可以为我提供一些指引吗？

非常感谢。

解决方案

不是将不透明度应用于imageHolder div，新的覆盖元素，为什么不应用不透明度的div的内容（如缩略图）？ imageHolder的背景颜色将显示出来，提供灰色的灰色效果。

新：

  $（'＃thumbsContainer'）。children（'。imageHolder'）。hover（function（）{
 $（this）.siblings（）。children（' （'img'）。stop（）'）。stop（）。animate（{'opacity'：'0.5'}）;}，
 function（）{$（this）.siblings（） .animate（{'opacity'：'1'}）; 
}）; 
  

使用imageHolders中的缩略图和背后的背景图像更新您的示例：
< a href =http://jsfiddle.net/jb36D/11/ =nofollow> http://jsfiddle.net/jb36D/11/

I'm half way there with this issue but have become stuck. I believe similar issues have been raised in the past but nothing quite what I'm looking for.

I currently have some demo code on jsFiddle which can be viewed here: 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'}); });

The desired effect is to have all divs display as per normal, then once you hover over a div, the other surrounding ones grey out or have some sort of overlay added to them. The purpose is to give the impression the div you have your mouse pointer on is highlighted.

You can see the code I have on jsFiddle achieves this but it applies an opacity to each div rather than some sort of overlay and it's this which is causing me problems, on my current project the divs sit above a background image rather than a full black background so the opacity isn't going to work and just makes the whole thing look confusing.

Ideally I would like to apply a div overlay on the unhighlighted divs and this I can style using CSS to give a greyed out effect. At this stage I'm completely open to suggestions on how to achieve the desired effect.

Anyone kind enough to chip in and provide me some pointers?

Much appreciated.

解决方案

Instead of applying opacity to the imageHolder div, or introducing a new overlay element, why not apply opacity to the contents (e.g. thumbnail image) of the div? The background color of the imageHolder will show through, providing the gray of the "grayed out" effect.

New:

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

Sample updating yours with thumbnails inside the imageHolders and a background image behind it all: http://jsfiddle.net/jb36D/11/

这篇关于使用jQuery突出显示div，同时使其他人灰掉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！