Jquery .悬停在重叠的div上

我正在做一个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

**我想出来了，但是苏珀·哈基：

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

---

如果任何人有一种更干净的方式，请放心

不可能只针对一个项目，因为结果取决于您所在站点的CSS设置方式。如果一个div的子对象被设置为继承其父对象的边框设置，那么当您设置其父对象的边框时，它们将获得一个边框

您也可能无法循环浏览父对象的子对象并删除其边框，因为子对象可能确实需要边框。这可能会有点棘手

---

我能想到的最好的解决方案是获取悬停在上面的项目的位置、高度和宽度，并创建一个新的临时div，该div位于上方并包含边框。这将产生所需的效果。

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

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

函数中更新此行为）。

e.stopPropagation（）

？它不起作用，但我可能没有正确实现它？我现在看到了您更新的代码。这可能适用于某些站点，但是如果您尝试允许用户浏览的任何站点的大纲，那么您将遇到一些问题，即应该存在的大纲会被您的脚本扼杀。请看下面我的其他建议。太好了！我在上面算出来了，但这要好多了-thnx