0

I have a child div inside of a parent div with the same class. Right now, if you hover over the child div inside the parent, a border is added to both the child and the parent. I want to make sure that only the div being hovered will get a border applied to it. 

$(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>

Here is a JSFiddle of what I'm referring to:

JS fiddle

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。Hover はJQuery でmouseenterandmouseleaveイベントを使用します。これにより、マウスが子から親に移動したときにイベントが発生するのを防ぎます。親の境界線を削除し (子に入る場合) 、伝播を停止して、それ自体の境界線が再適用されないようにする必要があります。

mouseenterとの違いに関する JQuery ドキュメントからの説明を次に示しmouseoverます。

mouseenter イベントは、イベントのバブリングを処理する方法が mouseover とは異なります。この例でマウスオーバーが使用された場合、マウス ポインターが内部要素の上に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。一方、mouseenter イベントは、マウスが子孫ではなく、バインドされている要素に入ったときにのみハンドラーをトリガーします。したがって、この例では、マウスがアウター要素に入ったときにハンドラーがトリガーされますが、インナー要素にはトリガーされません。

更新されたフィドル: 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");
});

あなたの問題は、サブ要素にカーソルを合わせると、親要素で hover イベントがトリガーされることです。これにより、問題が回避されます。

または、親、子、親の順に適切にホバリングできる、もう少し複雑なソリューションに従うこともできます。例はここにあります: http://jsfiddle.net/3SVGe/2/

于 2013-02-10T23:41:37.877 に答える