使用jQuery突出顯示一個div，同時使其他人灰掉

我在這個問題的一半，但已成爲卡住。我相信過去曾經有過類似的問題，但沒有什麼比我想要的要好。使用jQuery突出顯示一個div，同時使其他人灰掉

我現在有一些的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被突出顯示。

你可以看到我在jsFiddle上實現的代碼，但它對每個div應用不透明度而不是某種覆蓋，這是導致我出現問題的原因，在我當前的項目中，div位於背景圖像上方而不是完整的黑色背景，所以不透明度不起作用，只會讓整個事情看起來很混亂。

理想情況下，我想在未着色的div上應用div覆蓋，並且我可以使用CSS來改變灰色的效果。在這個階段，我完全接受有關如何達到預期效果的建議。

任何一種足夠的芯片和提供給我一些指針？

非常感謝。

來源

2013-02-06 WolfHook

您可以覆蓋絕對定位有重複的1x1透明PNG圖像作爲背景一個div –

這有什麼好處？ http://jsfiddle.net/jb36D/10/如果是，我會在稍後添加它作爲答案。要跑！ –

不知道它是否是最佳解決方案，但可以添加或刪除或更改這些兄弟的類，以便它們採用不透明的新CSS背景色。 – captainrad

代替將不透明性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-06 19:41:09 Lars

謝謝發佈。你的榜樣讓我解決了這個問題。我實際上將不透明效果應用於一個額外的包裝div，而不是img標籤。最初的'imageHolder'div將包括諸如h2標籤和p標籤之類的附加物，因爲它是用於產品描述以及圖像的。完美的作品，過渡非常順利。 – WolfHook

很高興聽到它。這是我的介紹jsfiddle，所以我們都贏了。 :-) – Lars

使用jQuery突出顯示一個div，同時使其他人灰掉

回答

相關問題