0

我正在制作一个 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");
}

如果有人有更清洁的方式，请随意

4

2 回答 2

0

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

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

}());

正如裘德奥斯本所说 - 最好创建边框并将其定位在目标元素上，而不是修改内联样式（您可以在setState函数中更新此行为）。

于 2013-06-20T07:57:31.803 回答
0

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

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

我能想到的最佳解决方案是获取您悬停的项目的位置、高度和宽度，并创建一个新的临时 div，该 div 位于顶部并包含边框。这应该会产生预期的效果。

于 2013-06-20T07:36:02.230 回答