<分区>
我的 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”恢复到原来的边框颜色。
我知道当鼠标在 child 上方时，它也会在 child 的 parent 上方。但我不确定为什么下面的“parent”语句不能解决问题。
$('.shell').mouseover(function() {
$(this).parent('.shell').css('border-color', '#8E8DA2');
$(this).css('border-color', '#0000FF');
});
$('.shell').mouseout(function() {
$(this).css('border-color', '#8E8DA2');
});
有什么想法吗？