Question

我有一个简单的问题，但对我来说这很神奇：）

我有一个类似DIVS的组DIV：

<div id="group">

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

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

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

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

</div>

我想要得到的是当我悬停在一个.item上时 - 我想将组中其他.item（#group）的不透明度更改为0.4但不是我正在徘徊的那个。如果我有不同数量的项目，是否有任何简单的jQuery解决方案？

Answer 1

试试这个： - Demo

See Opacity

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

对于IE8及更早版本添加： - filter:Alpha(opacity=40)

请参见底部的支持 Hover :not

Answer 2

你可以试试这个：

$('.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

Answer 3

以下是您需要的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以供参考。

Answer 4

有很多方法可以解决这个问题。这是一个：

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

http://jsfiddle.net/H4gYf/

如何使用jQuery将鼠标悬停在同一组中的一个div上时隐藏所有其他div？

4 个答案: