Question

我在同一个类的父div中有一个子div。现在，如果将鼠标悬停在父级内的子级div上，则会向子级和父级添加边框。我想确保只有被徘徊的div会应用一个边框。

$(document).ready(function () {
                            $(".content").hover(function () {
                                $(this).parents().removeClass('divHoverBorder');
                                $(this).siblings().removeClass('divHoverBorder');
                                $(this).addClass("divHoverBorder");
                                $(this).parents().find(".addContentItemDiv").hide();
                                $(this).find(".addContentItemDiv:first").show();

                            }, function () {
                                $(this).removeClass("divHoverBorder");
                                $('.addContentItemDiv').hide();
                            });
                        });

<div class="content" style="width: 500px; height: 300px;">
    <div class="content" style="width: 500px;  height: 200px;">

</div>
</div>

这是我所指的JSFiddle：

JS fiddle

Answer 1

你的主要问题在这里：

<div class="content" style="width: 500px; height: 300px;">
    <div class="content" style="width: 500px;  height: 200px;">    
</div>

由于两个div都具有相同的类，因此您实际上会在它们上面放置一个悬停事件，而您的JQuery无法区分它们。

既然你表示你必须这样做，请到这里：

$(document).ready(function () {
    $(".content").mouseover(function (e) {
        $(this).parents().removeClass('divHoverBorder');
        $(this).siblings().removeClass('divHoverBorder');
        $(this).addClass("divHoverBorder");
        $(this).parents().find(".addContentItemDiv").hide();
        $(this).find(".addContentItemDiv:first").show();
        var p = $(this).parent('.content');
        if (p.length) { p.removeClass('divHoverBorder'); e.stopPropagation(); }
    });
    $('.content').mouseout(function (e) {
        $(this).removeClass("divHoverBorder");
        $('.addContentItemDiv').hide();
    });
});

请注意，您无法使用hover。 Hover使用JQuery中的mouseenter和mouseleave事件，这将阻止在鼠标从子节点传输到父节点时触发事件。我们必须删除父边框（在输入子节点的情况下）和停止传播以防止它重新应用自己的边框。

以下是JQuery文档中有关mouseenter和mouseover之间差异的解释：

^{mouseenter事件与处理事件冒泡的方式不同。如果在此示例中使用鼠标悬停，则当鼠标指针移过Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter事件仅在鼠标进入绑定的元素而不是后代时触发其处理程序。因此，在此示例中，当鼠标进入外部元素而不是内部元素时，将触发处理程序。}

您的更新小提琴：http://jsfiddle.net/tTUaj/10/

Answer 2

使用类似的东西：

 $(".content").hover(function (ev) {
    if ($(ev.currentTarget).parent().hasClass(".content")){
     //this is a child
    } else {
    //this is a parent
    }
 });

Answer 3

我建议这样的事情：http://jsfiddle.net/3SVGe/1/

$(".cell").hover(function () {
    $(".cell").removeClass("over");
    $(this).addClass("over");
}, function () {
    $(this).removeClass("over");
});

您的问题是，当鼠标悬停在子元素上时，会在父元素上触发悬停事件。这避免了这个问题。

或者，您可以遵循稍微复杂的解决方案，这将允许将鼠标悬停在父级，然后是子级，然后正确地悬停在父级上。这里有一个例子： http://jsfiddle.net/3SVGe/2/

悬停在孩子身上，但不包括父div

3 个答案: