Chrome inspect element using jquery

Question

i wanted to create somthing similar to the inspect dom feature in chrome's devtools which when onhover a - preset list of doms - a div.shadow is created on top of the dom with the same width/height covering it,and when mouse leave shadow its hidden or in case a new selected dom is hovered it changes place and dimensions,

dom.mouseover(function(e) {
  shadow.css({
    display: "block",
    width: dom.width+"px",
    height: dom.height+"px",
    top: dom.top+"px",
    left: dom.left+"px"
  });
});

shadow.mouseleave(function() {
  $(this).css('display', 'none');
});;

but the problem arise when having parent/children in the selected dom lists like "body" where it put the shadow on the body but then ignore any mouseover/mouseenter from childrens

Answer 1

Tested and fully working

var shadow = $('<div></div>').css({background: 'rgba(100,0,0,0.5)', position: 'absolute'}).appendTo('body');
$(document).on('mousemove', function(e) {
    shadow.hide();

    var x = e.clientX, y = e.clientY,
        dom = $(document.elementFromPoint(x, y));

    if(dom.length < 1)
        return;

    shadow.css({
        display: "block",
        width: dom[0].offsetWidth +"px",
        height: dom[0].offsetHeight +"px",
        top: dom.position().top +"px",
        left: dom.position().left +"px"
   });

   shadow.show();
});