我最近在我正在做的一个项目中需要这样一个功能，结果我不得不使用边来创建一个框，否则event.target当你移动鼠标时最终会成为选择器，如果我要使用z-index: -1它当你有很多重叠的元素时会有点可疑……等等。

这是我为了您的利益从我的项目转换的一个版本，它涉及 jQuery，但转换为vanilla非常简单，因为只使用了jQuery的mousemove&css方法。

分步说明。

首先创建所需的5 个HTMLElement。

<div id="selector">
    <div id="selector-top"></div>
    <div id="selector-left"></div>
    <div id="selector-right"></div>
    <div id="selector-bottom"></div>
</div>

其次mousemove在document（或您的容器）上创建一个事件

$(document).mousemove(function(event) { ... });

然后在里面mousemove我们会做一些基本的检查来防止选择HTML, BODY, selector

var id = event.target.id, tagName = event.target.tagName;

if(id.indexOf('selector') !== -1 || tagName === 'BODY' || tagName === 'HTML') {
   return;
} 

然后我们需要创建一个对象来存储我们的元素。

var elements = {
    top: $('#selector-top'),
    left: $('#selector-left'),
    right: $('#selector-right'),
    bottom: $('#selector-bottom')
};

之后，我们存储一些变量，这些变量包含有关目标元素的一些信息，如下所示。

var $target = event.target;
    targetOffset = $target.getBoundingClientRect(),
    targetHeight = targetOffset.height,
    targetWidth  = targetOffset.width;

然后我们要做的就是像这样计算选择器所有4 个边的位置和高度。

elements.top.css({
    left:  (targetOffset.left - 4),
    top:   (targetOffset.top - 4),
    width: (targetWidth + 5)
});

elements.bottom.css({
    top:   (targetOffset.top + targetHeight + 1),
    left:  (targetOffset.left  - 3),
    width: (targetWidth + 4)
});

elements.left.css({
    left:   (targetOffset.left  - 5),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

elements.right.css({
    left:   (targetOffset.left + targetWidth + 1),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

所有这些+aFewPixels都只是一点点优化，因此2px选择器和目标之间存在差距。

因为CSS这就是我想出的。

#selector-top, #selector-bottom {
    background: blue;
    height:3px;
    position: fixed;
    transition:all 300ms ease;
}

#selector-left, #selector-right {
    background: blue;
    width:3px;
    position: fixed;
    transition:all 300ms ease;
}

这transition为选择器提供了非常好的滑动效果。

尝试演示http://jsfiddle.net/rFc8E/9/

注意：这也适用于transform: scale(2);例如。当元素被缩放时。

编辑：我刚刚更新了这个，我注意到elements对象在事件处理程序内，我在演示中将它移到了外面，这是一个非常重要的性能改进，因为现在，elements对象只创建一次而不是数百个在事件中数千甚至数百万次mousemove。

我使用 jQuery 作为另一个项目的组件编写了一个实现。源和文档可在此处获得：https : //github.com/andrewchilds/jQuery.DomOutline

一种简单的方法是使用轮廓而不是边框​​：

.highlight { outline: 4px solid #07C; }

只需将该类添加并删除到您要选择/取消选择的任何元素（以下代码未正确测试）：

document.body.addEventListener("mouseover", function(e) {
    e.stopPropagation();
    e.target.addEventListener("mouseout", function (e) {
        e.target.className = e.target.className.replace(new RegExp(" highlight\\b", "g"), "");
    });
    e.target.className += " highlight";
});

由于您使用的是轮廓（Chrome 支持）而不是边框​​，因此元素不会四处跳跃。我在EasyReader Extension 中使用了类似的东西。

HTML 元素选择器 (Vanilla JS)

仅使用 Vanilla JS 选择并突出显示页面上的任何 HTML 元素！在 Chrome、FF 和 Opera 中测试，不适用于 IE。

怎么运行的：

你需要的其实很简单。您可以在 JS 中创建一个带有背景的空 div 框，然后移动它以突出显示悬停元素的顶部。这是JS代码：

const hoverBox = document.createElement("div");
console.log("hoverBox: ", hoverBox);
hoverBox.style.position = "absolute";
// change to whatever highlight color you want
hoverBox.style.background = "rgba(153, 235, 255, 0.5)";
// avoid blocking the hovered element and its surroundings
hoverBox.style.zIndex = "0";
document.body.appendChild(hoverBox);
let previousTarget;
document.addEventListener("mousemove", (e) => {
    let target = e.target;
    if (target === hoverBox) {
        // the truely hovered element behind the added hover box
        const hoveredElement = document.elementsFromPoint(e.clientX, e.clientY)[1];
        if (previousTarget === hoveredElement){
            // avoid repeated calculation and rendering
            return;
        } else{
            target = hoveredElement;
        }
    } else{
        previousTarget = target;
    }
    const targetOffset = target.getBoundingClientRect();
    const targetHeight = targetOffset.height;
    const targetWidth = targetOffset.width;
    // add a border around hover box
    const boxBorder = 5;
    hoverBox.style.width = targetWidth + boxBorder * 2 + "px";
    hoverBox.style.height = targetHeight + boxBorder * 2 + "px";
    // need scrollX and scrollY to account for scrolling
    hoverBox.style.top = targetOffset.top + window.scrollY - boxBorder + "px";
    hoverBox.style.left = targetOffset.left + window.scrollX - boxBorder + "px";
});

请参阅演示
我还为元素选择器制作了一个npm 包，其中包含更多用户配置，例如背景颜色、边框宽度、过渡等。这是GitHub 页面。

我最终在 Firebug 小组中询问并得到了一些很大的帮助：

http://groups.google.com/group/firebug/browse_thread/thread/7d4bd89537cd24e7/2c9483d699efe257?hl=en#2c9483d699efe257