如何使用jQuery在同一組中的一個div上懸停時隱藏所有其他div？

我爲你簡單的問題，但它的魔力，我:)如何使用jQuery在同一組中的一個div上懸停時隱藏所有其他div？

我有一組DIV類似DIVS裏面那樣：

<div id="group"> 

    <div class="item"> 
    </div> 

    <div class="item"> 
    </div> 

    <div class="item"> 
    </div> 

    <div class="item"> 
    </div> 

</div>

我想，當我將鼠標懸停在一個是。 item - 我想將其他.item（s）組中的（#group）的不透明度更改爲0.4，但不是我徘徊的那個。如果我有不同數量的項目，是否有任何簡單的jQuery解決方案？

來源

2013-04-23 Rafcio Kowalsky

試試這個： - Demo

See Opacity

.item:not(:hover) 
{ 
    opacity:0.4; 
}

爲IE8和早期補充： - filter:Alpha(opacity=40)

見底部支持Hover:not

來源

2013-04-23 17:27:29 PSL

CSS真的「不（：懸停）」瀏覽器支持？對於IE8和更早的版本， – 2013-04-23 17:31:00

，你的「過濾器」將無關緊要......因爲它沒有墊片就看不到它。 – PlantTheIdea 2013-04-23 17:38:27

恨這些東西的IE瀏覽器..但傳統的jQuery方法會做:) – PSL 2013-04-23 17:41:59

你可以試試這個：

$('.item').hover(function(){ 
    $('.item').not(this).css('opacity','0.4'); 
},function(){ 
    $('.item').not(this).css('opacity','1'); 
});

或者：

$('.item').mouseover(function(){ 
    $('.item').not(this).css('opacity','0.4'); 
}).mouseout(function(){ 
    $('.item').not(this).css('opacity','1'); 
});

Jsfiddle example

來源

2013-04-23 17:28:17 DarkAjax

這種'.hover（）'方法不再適用於最新版本的jQuery。 – PlantTheIdea 2013-04-23 17:30:40

我有jQuery 2.0和它爲我工作 – 2013-04-23 17:33:53

'hover（）'方式對我來說也適用於jQuery 2.0 – DarkAjax 2013-04-23 17:34:40

這裏是jQuery的的例子，你將需要：

var $item = $('.item'); 

$item.on({ 
    mouseenter:function(){ 
     $item.not(this).css({opacity:0}); 
    }, 
    mouseleave:function(){ 
     $item.css({opacity:1}).removeAttr('style'); 
    } 
});

和here is a jsFiddle供參考。

來源

2013-04-23 17:32:23 PlantTheIdea

不錯的答案:) - 偉大的思想... – shanabus 2013-04-23 17:35:33

是的，我看到了Urs太哈哈。我似乎是唯一知道如何將選擇器存儲在緩存中的人...... – PlantTheIdea 2013-04-23 17:36:56

有很多方法可以解決這個問題。這裏是一個：

$(".item").on(
    { 
     mouseenter: function() 
    { 
     $(".item").not(this).fadeTo('slow', 0.4); 
    }, 
    mouseleave: function() 
    { 
     $(".item").fadeTo('slow', 1); 
    } 
    });

http://jsfiddle.net/H4gYf/

來源

2013-04-23 17:34:59 shanabus

如何使用jQuery在同一組中的一個div上懸停時隱藏所有其他div？

回答

相關問題