Question

我正在尝试编写一个JavaScript，当用户将鼠标悬停在DOM上时，它将突出显示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事件都将被忽略，因为它们是在掩码上而不是在实际的基础元素上注册的。我需要想办法解决这个问题。

谁能帮助我更好地采用方法2？还是建议另一种方法？

谢谢，斯里拉姆

Answer 1

您应该在CSS中而不是在JS中执行此操作。使用:hover选择器

.your-class:hover{
    background-color: #205081;
}

Answer 2

@LouieAlmeda的答案就是路要走

但是，如果要保留mask div，可以执行：http://jsbin.com/filelavegu/1/edit?html,css,js,output

与您的唯一区别是我添加了

hObj.style.pointerEvents='none';

在蒙版创建时

它使指标事件通过div

Answer 3

@LouieAlmeda和@jonatjano都正确，我只是想补充一点，如果您不喜欢在页面上重新排列元素，则可以在元素上添加div{width:25%;display:inline;}，然后在鼠标上悬停/悬停只需更改边框颜色

Answer 4

您还可以使用：

[attribute = value]:hover {
   css declarations;
}

并在所有应该具有悬停效果的div上使用它。

Answer 5

我通过@jonatjano 更改了版本，例如

它考虑了视口滚动
它更紧凑

看here

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

function updateMask(target) {
    let elements = document.getElementsByClassName("highlight-wrap")
    let hObj
    if (elements.length !== 0) {
        hObj = elements[0]
    } else {
        hObj = document.createElement("div");
        hObj.className = 'highlight-wrap';
        hObj.style.position = 'absolute';
        hObj.style.backgroundColor = '#205081';
        hObj.style.opacity = '0.5';
        hObj.style.cursor = 'default';
        hObj.style.pointerEvents = 'none';
        document.body.appendChild(hObj);
    }
    let rect = target.getBoundingClientRect();
    hObj.style.left = (rect.left + window.scrollX) + "px";
    hObj.style.top = (rect.top + window.scrollY) + "px";
    hObj.style.width = rect.width + "px";
    hObj.style.height = rect.height + "px";

}

JavaScript-突出显示悬停元素

5 个答案: