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＆amp; mouseout

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

演示：Fiddle

为什么，请查看mouseenter和mouseleave

的mdn文档

Answer 2

试试这个脚本

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

Answer 3

这是因为您使用过的课程。请参阅以下代码

<div class="box1">
    <div class="box">
        <div class="box">

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

以下是jquery代码行

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

和css

.box{
    width:100px;
    height:100px;
    background:red;
}

仅对JQuery中的悬停元素起作用。 - 同一课程

3 个答案: