Question

我的html包含一系列嵌套的div，每个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的边框颜色发生变化，但当鼠标进入子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找到了一个有效的解决方案。关键是在mouseover事件上调用stopPropagation（）方法。

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

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

Answer 2

一种选择是将单元格的当前边框颜色存储在变量中，然后在鼠标离开单元格后重置它。

从上面的代码中，看起来好像要返回它的颜色是一致的，所以你可以将它存储在自己的变量中。

您可以稍微重构一下代码并执行以下操作：

var sOriginalColor = '#8E8DA2';
$('.shell')
 .mouseover(function(evt) {
    evt.preventDefault(); // specified for purposes of example mentioned in the comments
    $(this).parent('.shell').css('border-color', sOriginalColor);
    $(this).css('border-color', '#0000FF');
 })
 .mouseout(function() {
    $(this).parent('.shell').css('border-color', sOriginalColor);
    $(this).css('border-color', sOriginalColor);
 });

不可否认，我运行了您的代码，但我不能完全确定我提供的解决方案是您正在寻找的解决方案，因为发生了与事件冒泡相关的某些行为。

如果这就是您所遇到的问题，那么阅读quirks mode article on events可能会帮助您找出问题所在。

Answer 3

这应该可以解决问题

$('.shell').mouseenter(function() {
    $(this).parent('.shell').css('border-color', '#8e8da2');
    $(this).css('border-color', '#00f');
});

$('.shell').mouseleave(function() {
    $(this).parent('.shell').css('border-color', '#00f');
    $(this).css('border-color', '#8e8da2');
});

首先，你需要使用mouseenter和mouseleave，因为它们不会冒泡，只有它们附加的特定元素才能获得事件。此外，在休假时，你需要给父母带回“高亮”颜色，因为当你离开孩子时，你自然会最终进入父母。没有它，父母将保持默认颜色，因为在这种情况下，鼠标中心不会触发 - 似乎离开孩子不会触发父母的输入，所以你必须手动完成。

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

3 个答案: