Chrome使用jquery检查元素

Question

我想创建类似于chrome的devtools中的inspect dom功能的东西,当转发时 - 预设的doms列表 - 在dom顶部创建div.shadow,覆盖它的宽度/高度相同,当鼠标离开阴影时如果隐藏了新的选定dom,它会改变位置和尺寸,

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

但是当父母/孩子在所选的dom列表中出现问题时会出现问题,例如"身体",它会将阴影放在身体上然后忽略来自儿童的任何鼠标悬停/鼠标中心

Answer 1

经过测试并完全正常工作

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