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

Question

我有一个简单的问题要问你，但这对我来说很神奇:)

我有一个组 DIV，里面有类似的 DIVS：

<div id="group">

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

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

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

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

</div>

我想要得到的是当我将鼠标悬停在一个 .item 上时 - 我想将组 (#group) 中其他 .item(s) 的不透明度更改为 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 示例

Answer 3

这是您需要的 jquery 示例：

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

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

这是一个 jsFiddle供参考。

Answer 4

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

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

http://jsfiddle.net/H4gYf/