0

我在同一个类的父 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小提琴

4

3 回答 3

2

你的主要问题在这里：

<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. 悬停在 JQuery 中使用mouseenterandmouseleave事件，这将防止当鼠标从子级移到父级时触发事件。我们必须同时移除父边界（在进入子边界的情况下）并停止传播以防止它重新应用自己的边界。

mouseenter这是 JQuery 文档中关于和之间区别的解释mouseover：

mouseenter 事件在处理事件冒泡的方式上与 mouseover 不同。如果在这个例子中使用了 mouseover，那么当鼠标指针移动到 Inner 元素上时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter 事件仅在鼠标进入它所绑定的元素而不是后代元素时触发其处理程序。所以在这个例子中，当鼠标进入 Outer 元素而不是 Inner 元素时，会触发处理程序。

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

于 2013-02-10T23:11:27.507 回答
1

使用这样的东西：

 $(".content").hover(function (ev) {
    if ($(ev.currentTarget).parent().hasClass(".content")){
     //this is a child
    } else {
    //this is a parent
    }
 });
于 2013-02-10T23:32:39.493 回答
1

我会推荐这样的东西：http: //jsfiddle.net/3SVGe/1/

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

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

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

于 2013-02-10T23:41:37.877 回答