5

我想在 chrome 的 devtools 中创建类似于检查 dom 功能的东西，当鼠标悬停在预置的 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”，它将阴影放在身体上，然后忽略来自子的任何 mouseover/mouseenter

4

3 回答 3

4

经过测试并完全正常工作

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();
});
于 2013-09-14T19:08:40.440 回答
1

您是否考虑过使用轮廓而不是覆盖当前选定的元素？当元素被覆盖时，您不能使用mousemove为您提供悬停的目标元素（因为最顶部的元素将始终是阴影）。这需要隐藏并在每次mousemove触发时显示阴影，这会损害性能。

请参阅此示例，该示例仅使用来自以下网址的大纲和目标元素：http mousemove: //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 : "");
});
于 2013-09-14T19:42:28.860 回答
0

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

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

请参阅http://www.quirksmode.org/dom/tests/elementfrompoint.html它是如何工作的。

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

于 2013-09-14T19:06:57.657 回答