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

Question

我有一个元素，它的css在:hover下被修改了。我还有一些javascript可以改变元素的高度。但是，如果javascript在:hover状态处于活动状态时触发，则即使高度变化将元素从鼠标下方移出，该状态也会保持不变。

这也是因为javascript是由元素内的单击事件触发的。这种效果也发生在触摸屏上。

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

我已经创建了一个fiddle来演示这个问题。

我想，如果出现最坏的情况，我可以使用类、mouseenter、mouseleave和DOMAttrModified手动完成所有这些工作。但这听起来很痛苦，甚至在javascript方面可能很昂贵(我必须手动识别鼠标是否在我的元素范围内)。

更新

好吧，所以我真的不能碰DOMAttrModified，性能影响是massive。

Answer 1

Element.parentNode.replaceChild(元素，元素)；

Answer 2

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

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

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

Answer 3

我根本不确定这在现实生活中是否可行，但这只是我能看到的黑客行为。基本上，在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个间隔来演示()这个可以调整的效果。但同样，我不确定在setInterval上提取这些信息有多可行