jQuery - 在鼠标悬停时更改同一类嵌套 div 的边框颜色

Question

我的 html 包含一系列嵌套的 div，每个都有相同的类（“shell”）但有一个唯一的 id。

<div class="shell s01" id="blah">
    <!-- s01 content -->
    <div class="shell s02" id="bar">
        <!-- s02 content -->
        <div class="shell s03" id="wah">
            <!-- s03 content -->
        </div>

        <div class="shell s03" id="foo">
            <!-- s03 content -->
        </div>
    </div>
</div>

我希望鼠标进入时div的边框颜色发生变化，但是当鼠标进入子div时它应该恢复到原来的颜色。下面的 jQuery 代码将边框颜色更改为蓝色，但不会在鼠标进入子 div 时将父 div 边框恢复为原始颜色 (#8E8DA2)。相反，当鼠标悬停在一个内部 div 上时，它和它的所有祖先都会被高亮显示。例如，如果将鼠标悬停在“wah”上，那么也会突出显示“blah”和“bar”。我希望“blah”和“bar”恢复到原来的边框颜色。

我知道当鼠标悬停在孩子上方时，它也会悬停在孩子的父母上方。但我不确定为什么下面的“父母”声明不能解决问题。

$('.shell').mouseover(function() {
    $(this).parent('.shell').css('border-color', '#8E8DA2');
    $(this).css('border-color', '#0000FF');
});

$('.shell').mouseout(function() {
    $(this).css('border-color', '#8E8DA2');
});

有任何想法吗？谢谢！

Answer 1

谢谢你们——对不起，我还没有足够的代表来投票给答案。

我在this other stackoverflow question 中找到了一个有效的解决方案。关键是在鼠标悬停事件上调用 stopPropagation() 方法。

$('.shell').mouseover(function(e) {
    e.stopPropagation();
    $(this).css('border-color', '#0000FF');
})

$('.shell').mouseout(function() {
    $(this).css('border-color', '#8E8DA2');
});