0

ユーザーのマウスが置かれているdom要素に境界線を追加するクロム拡張を作成しています。私の主な問題は、子を持つ div 要素をロールオーバーすると、親 div と子 div の両方が境界線を受け取るときに、マウスのすぐ下にある div だけが境界線を受け取ることです。ここに私のコードの短縮版があります:

$("*").hover(
function(e) {
    var targ = $(e.currentTarget);
    targ.css("border", "3px solid red");
},function(e){
    var targ = $(e.currentTarget);
    targ.css("border", "none");
}
);

親divではなく、マウスの直下のdivのみをターゲットにする方法はありますか?

* *それを理解しましたが、それはすっごくハッキーです:

var killedObj;
var outlines=[];
var hovering=[];

$("*").not("body").not("head").each(
    function(i){
        outlines[i] = $(this).css("outline");
        hovering[i] = false;
        //console.log("index = " + i + " class name = " +  $(this).attr('class'));
        $(this).hover(
            function(){ 
                hovering[i]=true;
                if($(this).parents()!=null)killOutline($(this).parents(), outlines[$(this).parents().index()]); 
                if($(this).children()!=null)killOutline($(this).children(), outlines[$(this).children().index()]); 
                $(this).css("outline", "2px solid red");
            },function(){
                hovering[i]=false;
                $(this).css("outline", ""+outlines[i]);
                if($(this).parent()!=null){
                    if(hovering[i-1] == true){
                        resetOutline($(this).parent());
                    }
                }
            }
        );
    }
);

function killOutline(obj,outline){
    obj.css("outline", ""+outline);
}
function resetOutline(obj){
    obj.css("outline", "2px solid red");
}

誰かがよりクリーンな方法を持っている場合は、お気軽に

4

2 に答える 2

0

ページにアタッチしているリスナーが多すぎます。これを処理するには、1 つだけ必要です。このページで正しくテストするには、コンソールのここに次のコードを貼り付けてみてください。

;(function() {
    var lastTarget;

    jQuery(document).on({
        mouseover: function(e) {
            e.stopPropagation();
            lastTarget = jQuery(e.target);
            setState(lastTarget, true);
        },
        mouseout: function(e) {
            if(lastTarget) {
                setState(lastTarget, false);
            }
            lastTarget = null;
        }
    });

    var setState = function(block, state) {
        if(state) {
            block.css("outline", "3px solid red");
        } else {
            block.css("outline", "");
        }
    };

}());

Jude Osborn が言ったように、インライン スタイルを変更するよりも、境界線を作成してターゲット要素の上に配置する方が適切です (この動作はsetState関数で更新できます)。

于 2013-06-20T07:57:31.803 に答える
0

1 つのアイテムだけをターゲットにすることはできません。これは、サイトの CSS の設定方法によって結果が異なるためです。div の子が親の境界線設定を継承するように設定されている場合、親の境界線を設定すると境界線が取得されます。

また、子が実際に境界線を必要とする可能性があるため、親の子を循環して境界線を削除することもおそらくできません。ちょっとややこしいかもしれません。

私が考えることができる最善の解決策は、ホバリングしているアイテムの位置、高さ、幅を取得し、上に置かれ、境界線を含む新しい一時的な div を作成することです。これにより、目的の効果が得られるはずです。

于 2013-06-20T07:36:02.230 に答える