JavaScript - 突出显示悬停上的元素

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

这里的工作示例

这种方法的优点

它工作得非常好.

有这种方法的缺点

当我为现有DOM元素添加边框时,它会重新排列页面上的元素,您可以观察到元素的轻微改组效果.看起来不太棒.

方法2

我希望突出显示是无缝的.也就是说,保留页面的外观并简单地在元素顶部覆盖高亮蒙版.

为此,在这种情况mouseover下,我动态创建了一个掩码元素,其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();
        }
    }
}

这里的工作示例

使用这种方法的优点 我觉得这更优雅,并且不会打扰页面,只是在元素顶部覆盖一个面具.

缺点

当用户将鼠标悬停在最顶层的容器(div)上时,它会为该元素创建一个掩码.之后,所有后续mouseover事件都将被忽略,因为它们在掩码上注册,而不是在实际的底层元素上.我需要找到解决这个问题的方法.

谁能帮助我更好的方法2？或者建议另一种方法？

谢谢,Sriram

Answer 1

你应该在CSS而不是JS中这样做.使用:hover选择器

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

Answer 2

@LouieAlmeda 的答案是正确的方法

但如果你想保留掩码div，你可以这样做：http://jsbin.com/filelavegu/1/edit ?html,css,js,output

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

hObj.style.pointerEvents='none';

在创建蒙版时

它使pointerevent穿过div