Q:

.hover on overlapping divs

i'm making a chrome extension where i add a border to whatever dom element the user's mouse is over.  my main problem is that when i rollover a div element with children the parent div and the child div both recieve a border when i only want the div directly under the mouse to receive the border.  here's a shortened version of my code:
$("*").hover(
function(e) {
    var targ = $(e.currentTarget);
    targ.css("border", "3px solid red");
},function(e){
    var targ = $(e.currentTarget);
    targ.css("border", "none");
}
);

is there a way the target can be ONLY the div directly under the mouse not the parent divs?
**figured it out but it's sooper 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");
}

if anybody has a cleaner way feel free 

A:

You're attaching too many listeners on the page. To handle this you'll need just one.
Try to paste following code in console right here to test right on this page:
;(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", "");
        }
    };

}());

As Jude Osborn said - it's better to create border and position it over target element rather then modifying inline styles (you can update this behavior in setState function).

