Javascript 在悬停div上淡出其他div

我试图找出如何淡出所有的div，除了悬停的那一个。这是到目前为止我的代码，我只能让它淡出悬停的那一个，而不是所有悬停的那个

$(document).ready(function () {

    $('.fadeHover').hover(

    function () {
        $(this).stop().fadeTo('slow', 0.3);
    },

    function () {
        $(this).stop().fadeTo('slow', 1);
    });
});

<div class="fadeHover fadeDiv">
    <p>1</p>
</div>
<div class="fadeDiv fadeHover">
    <p>2</p>
</div>
<div class="fadeDiv fadeHover">
    <p>3</p>
</div>    

$（文档）.ready（函数（）{
$（'.fadeHover'）。悬停(
函数（）{
$（this.stop（）.fadeTo（'slow'，0.3）；
},
函数（）{
$（this.stop（）.fadeTo（'slow'，1）；
});
});
一,

二,

三,

尝试一下：

$('.fadeHover').hover(

    function(){
        var current = $(this);
        $('.fadeHover').each(function(){
            if ($(this) !== current) $(this).stop().fadeTo('slow', 0.3);
        });
    },

    function(){
        var current = $(this);
        $('.fadeHover').each(function(){
            if ($(this) !== current) $(this).stop().fadeTo('slow', 1);
        });
    }

);

这是一把小提琴：

Slash的解决方案也很有效，它效率更高，但代码更多。

检查此项

只需使用jquery

not（）

selector和

this

即可

$('.fadeHover').hover(
   function () {
    $('.fadeHover').not(this).fadeTo('slow', 0.3);
   },
    function () {
    $('.fadeHover').fadeTo('slow', 1);
});

---

这可以通过纯CSS3实现：

.fade-container .fade-hover {
    opacity: 1;
    transition: opacity .5s linear;
}

.fade-container:hover .fade-hover {
    opacity: 0.3;
}

.fade-container:hover .fade-hover:hover {
    opacity: 1;
}

使用HTML：

<div class="fade-container">
    <div class="fade-hover">
        <p>1</p>
    </div>
    <div class="fade-hover">
        <p>2</p>
    </div>
    <div class="fade-hover">
        <p>3</p>
    </div>
</div>

一,

二,

三,

$(document).ready(function () {
    $(document.body)
        .on('mouseenter', '.fadeHover', function () {
            $('.fadeHover:not(:hover)').stop().fadeTo('slow', 0.3);
        })
        .on('mouseleave', '.fadeHover', function () {
            $('.fadeHover:not(:hover)').stop().fadeTo('slow', 1);
        });
});

.fade-container .fade-hover {
    opacity: 1;
    transition: opacity .5s linear;
}

.fade-container:hover .fade-hover {
    opacity: 0.3;
}

.fade-container:hover .fade-hover:hover {
    opacity: 1;
}

<div class="fade-container">
    <div class="fade-hover">
        <p>1</p>
    </div>
    <div class="fade-hover">
        <p>2</p>
    </div>
    <div class="fade-hover">
        <p>3</p>
    </div>
</div>