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

【问题标题】：Mouseover Highlighting of Page Elements页面元素的鼠标悬停突出显示
【发布时间】：2014-02-08 22:06:01
【问题描述】：

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

【问题讨论】：

标签： javascript firefox firefox-addon highlight onmouseover

【解决方案1】：

试试这样的：

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

【讨论】：

另见此主题：我们讨论 mouseenter 和 mouseleave 事件：stackoverflow.com/a/21619481/1828637
我还修复了代码中的一个错误，我忘记将 lastBoxedEl 设置为目标，因此它不会删除大纲

【解决方案2】：

我过去做过一些演示。这是为您的请求打开的源代码：

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

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

点击元素后留下红色框。
由于添加了边框，因此元素有少许回流。您可以修改box 类，使box-sizing 设置为border-box

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

【讨论】：