我正在尝试编写一个JavaScript，当用户将鼠标悬停在DOM中的某个元素上时，它会高亮显示该元素。这应该是一个跨浏览器的外部插件。理想情况下，我正在尝试模仿浏览器检查工具的行为。
我不能说我没有成功，但我坚持两个选择，都有自己的优点和缺点。

• • 方法1**

我处理mouseover事件并简单地给目标元素添加一个边框。当我将鼠标悬停在另一个元素上时，我只重置现有的高亮元素。相同的代码如下：

function addHighlight(target) {
    target.classList.add('highlighted');
}

function removeHighlight(target) {
    target.classList.remove('highlighted');
}

window.addEventListener('mouseover',function(e) {
    addHighlight(e.target);
});

window.addEventListener('mouseout',function(e) {
    removeHighlight(e.target);
});

Working Example here

• • 此方法的优点**

它工作得非常好。

• • 此方法的缺点**

当我给现有的DOM元素添加边框时，它在某种程度上重新排列了页面上的元素，您可以观察到元素的轻微移动效果，看起来不太好。

• • 方法2**

我希望高亮显示是无缝的，也就是说，保持页面的外观，只需要在元素的顶部覆盖一个高亮显示遮罩。
为此，我在mouseover事件中动态创建了一个mask元素，将其position设置为absolute，并将其坐标设置为目标元素的精确坐标。

window.addEventListener('mouseover',function(e) {
    applyMask(e.target);
});

function applyMask(target) {
    if(document.getElementsByClassName('highlight-wrap').length > 0) {
        resizeMask(target);
    }else{
        createMask(target);
    }
}

function resizeMask(target) {
    var rect = target.getBoundingClientRect();
    var hObj = document.getElementsByClassName('highlight-wrap')[0];
    hObj.style.top=rect.top+"px";
    hObj.style.width=rect.width+"px";
    hObj.style.height=rect.height+"px";
    hObj.style.left=rect.left+"px";
   // hObj.style.WebkitTransition='top 0.2s';
}

function createMask(target) {
    var rect = target.getBoundingClientRect();
    var hObj = document.createElement("div");
    hObj.className = 'highlight-wrap';
    hObj.style.position='absolute';
    hObj.style.top=rect.top+"px";
    hObj.style.width=rect.width+"px";
    hObj.style.height=rect.height+"px";
    hObj.style.left=rect.left+"px";
    hObj.style.backgroundColor = '#205081';
    hObj.style.opacity='0.5';
    hObj.style.cursor='default';
    //hObj.style.WebkitTransition='top 0.2s';
    document.body.appendChild(hObj);
}

function clearMasks() {
    var hwrappersLength = document.getElementsByClassName("highlight-wrap").length;
    var hwrappers = document.getElementsByClassName("highlight-wrap");
    if(hwrappersLength > 0) {
        for(var i=0; i<hwrappersLength; i++) {
            console.log("Removing existing wrap");
            hwrappers[i].remove();
        }
    }
}

Working example here

• • 这种方法的优点**我觉得这样更优雅，而且不干扰页面，只是在元素顶部覆盖一个掩码。
• • 缺点**

当用户将鼠标悬停在最顶端的容器（div）上时，它会为该元素创建一个掩码。在此之后，所有后续的mouseover事件都会被忽略，因为它们注册在***mask***上，而不是实际的底层元素上。我需要找到一种方法来解决这个问题。
有人能帮助我改进方法2吗？或者建议另一种方法？
谢谢，斯里拉姆