javascript - 仅对 JQuery 中悬停的元素产生影响。 - 相同的类(class)

Question

我有以下结构:

<div class="box a">
    <div class="box b">
        <div class="box c">

        </div>
    </div>
    <div class="box d">

    </div>
</div>

现在我想做以下事情:如果我将鼠标悬停在最大的盒子 a 上，我想对它做一些效果，例如不透明度。

但是，如果我将鼠标悬停在框 c(位于框 a 和 b 中)上，我只想对框 c 产生不透明效果。

我尝试的是:

$('.box').mouseenter(function(e) {
    e.stopPropagation();
    $(this).css({'opacity': 0});
}).mouseleave(function(e) {
    e.stopPropagation();
    $(this).css({'opacity': 1});
});

但这行不通。有人知道解决方案吗？

我用 JS 和 CSS 都试过了，但两次都弄不明白。在这里看到这两种解决方案真的很有帮助。

Answer 1

您将需要使用 mouseover & mouseout

$('.box').mouseover(function (e) {
    e.stopPropagation();
    $(this).css({
        'opacity': .25
    });
}).mouseout(function (e) {
    e.stopPropagation();
    $(this).css({
        'opacity': 1
    });
});

演示:Fiddle

为什么，看mouseenter的mdn文档和 mouseleave