Chrome inspect element using jquery

Chrome inspect element using jquery

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