Question

我想创建类似于chrome的devtools中的inspect dom功能的东西当onhover a - 预设的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();
});

Answer 2

您需要的是：document.elementFromPoint(x, y)

你必须隐藏阴影（显示：无），
从事件中获取鼠标的坐标
使用document.elementFromPoint(x, y)获取您已结束的元素
将阴影的可见性设置为正常。

请参阅http://www.quirksmode.org/dom/tests/elementfrompoint.html工作原理。

这个，你不能用鼠标悬停，...你必须使用mousemove

Answer 3

您是否考虑使用大纲而不是覆盖当前选定的元素？当元素被覆盖时，您无法使用mousemove来为您提供悬停的目标元素（因为最顶层的元素将始终是阴影）。这需要隐藏阴影并在mousemove每次发射时都会显示阴影。

请参阅此示例，该示例仅使用大纲和mousemove中的目标元素：http://jsfiddle.net/U4fBu/3/

var _prevElm, _prevOutline;

document.addEventListener("mousemove", function(e) {
    if (_prevElm != e.target) {
        // Restore old outline styles
        if (_prevElm) _prevElm.style.outline = _prevOutline;
        // Outline the newly hovered element
        _prevElm = e.target;
        _prevOutline = _prevElm.style.outline;
        e.target.style.outline = "3px solid #0f0";

    }
});

document.addEventListener("click", function(e) {
    // Don't let the click affect the actual page
    e.stopImmediatePropagation();
    var elm = e.target;
    output.innerHTML = "Element clicked: "
        + elm.tagName
        + (elm.id ? "#" + elm.id : "");
});

Chrome使用jquery检查元素

3 个答案: