Question

我正在寻找已有的开源解决方案，或者有人指出我找到正确的方向。我正在创建一个适用于DOM元素的Firefox扩展。在Firefox和Chrome中，有元素检查器突出显示鼠标当前悬停的区域和/或元素，例如当前悬停在其上的div或者如果它悬停在其上的按钮。我正在寻找如何将该功能实现到我自己的扩展中。如果有任何解决方案，请告诉我，谢谢！

Answer 1

我过去做了一些演示。以下是为您的请求打开的来源：

https://github.com/kashiif/hilight-dom-element-on-hover

请注意，这不完整，可能需要完成，例如：

单击元素后会留下红色框。
因为正在添加边框，所以会有一点元素重新流动。您可以修改box类，以便box-sizing设置为border-box

如果您愿意，可以向我发送更改请求。

Answer 2

尝试这样的事情：

var lastBoxedEl;

function moused(e) {
    var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
    if (lastBoxedEl) {
        lastBoxedEl.style.outline = 'none'
    }
    lastBoxedEl = target;
    target.style.outline = '5px solid red';
}
document.body.addEventListener('mouseover', moused, false);

鼠标悬停突出显示页面元素

2 个答案: