更改DOM后刷新浏览器悬停效果

Posted 2021-04-14

我有一个css在:hover下改变的元素。我也有一些改变元素高度的javascript。但是，如果javascript在:hover状态处于活动状态时触发，则状态仍然保持，即使高度更改会将元素从鼠标下方移出。

此外，因为javascript是由元素中的click事件触发的。这种效果也会出现在触摸屏上。

我想知道是否有办法解决这个问题。我可以强制浏览器重新计算悬停（或鼠标悬停等）吗？看看this question，我并不乐观。

我创建了一个fiddle来证明这个问题。

我想如果最糟糕的情况发生在最坏的情况下，我可以手动使用类，mouseenter，mouseleave和DOMAttrModified。但这听起来很痛苦，甚至可能在javascript方面成本很高（我必须手动识别鼠标是否位于我的元素范围内）。

UPDATE

好吧，所以我真的无法触摸DOMAttrModified，性能打击是massive。

答案

如果您只是将光标留在那里，mouseleave事件永远不会触发，因为从技术上讲，您不会离开具有悬停状态的div。

我建议不要使用mouseover。这是一种痛苦。请改用mouseenter。

我不知道任何可行的解决方案，除了通过测试div是否处于:hover状态来解决它，然后创建一个具有超时的单独函数以将其返回到其原始位置，大小等。

另一答案

我不确定这在现实场景中是否可行，但这只是我能看到的黑客攻击。基本上在window.mouseMove事件中保存鼠标的当前坐标，然后在setInterval上将其与元素的坐标进行比较，以确定元素是否“悬停”。我必须使用setInterval，否则除非鼠标移动 - 没有事件发生：

var el = document.getElementById('el');
var mouseX, mouseY;

window.onmousemove=function(event){
    ev = event || window.event;
    mouseX = ev.pageX;
    mouseY = ev.pageY;
}

setInterval(function() {

    if (mouseX >=el.offsetLeft && mouseX <= el.offsetLeft + el.offsetWidth &&
        mouseY >=el.offsetTop && mouseX <= el.offsetTop + el.offsetHeight) {

        el.style.top = '200px';
        el.style.left = '200px';
        el.className = 'div_hover';


    } else {

        el.style.top = '50px';
        el.style.left = '50px';
        el.className = '';

    }


},1000) 

我用1000间隔来证明这个效果可以调整（demo）。但同样，我不确定在setInterval上提取此信息是否可行

另一答案

element.parentNode.replaceChild（element，element）;