Question

我正在制作一个chrome扩展，我在其中为用户鼠标所在的任何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？

* *想出来了，但它太棒了hakey：

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");
}

如果有人有更清洁的方式感到自由

Answer 1

不可能只定位一个项目，因为结果取决于您为所在站点设置CSS的方式。如果将div的子项设置为继承其父级的边框设置，则在设置其父级边框时它们将获得边框。

您也可能无法循环访问父母的子女并移除他们的边界，因为孩子可能实际上需要边框。它可能会有点棘手。

我能想到的最好的解决方案是获取你正在盘旋的物品的位置，高度和宽度，并创建一个新的临时div，其中包含一个边框。这应该会产生预期的效果。

Answer 2

您在页面上附加了太多的侦听器。要解决这个问题，你只需要一个。尝试在此处的控制台中粘贴以下代码，以便在此页面上进行测试：

;(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函数中更新此行为）更好。

.hover重叠div

2 个答案: