javascript - Chrome 使用 jquery 检查元素

Question

我想创建类似于 chrome 开发工具中的检查 dom 功能的东西当悬停 a - 预设的 dom 列表时 - 在 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 列表中有父/子时，如“body”，问题就出现了它将阴影放在 body 上，然后忽略来自 child 的任何鼠标悬停/鼠标输入

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