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

我有一个元素，它的css在

：hover

下更改。我还使用了一些javascript来更改元素的高度。但是，如果javascript在

：hover

状态处于活动状态时启动，则即使高度更改将元素从鼠标下方移出，该状态仍保持不变

另外，由于javascript是由元素中的单击事件触发的。这种效果也会出现在触摸屏上

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

我创建了一个示例来演示这个问题

我想如果最坏的情况发生了，我可以用类、

mouseenter

、

mouseleave

和

domatrtmodified

手动完成。但这听起来很痛苦，甚至可能在javascript方面代价高昂（我必须手动确定鼠标是否位于我的元素范围内）

更新

---

好的，所以我真的不能碰

domatrtmodified

，性能影响是。

如果你只是将光标留在那里，

mouseleave

事件永远不会触发，因为从技术上讲，你不会离开具有悬停状态的div

我建议不要使用

鼠标盖

。这是一种痛苦。使用

鼠标指针

---

除了通过测试div是否处于

：hover

状态，然后创建一个带有超时的单独函数以将其返回到原始位置、大小等，我不知道有什么可行的解决方案。我完全不确定这在现实场景中是否可行，但这是我所能看到的唯一一个黑客行为。基本上在

窗口上。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) 

var el=document.getElementById（'el'）；
var mouseX，mouseY；
window.onmousemove=函数（事件）{
ev=事件| | window.event；
mouseX=ev.pageX；
mouseY=ev.pageY；
}
setInterval（函数（）{
if（mouseX>=el.offsetLeft&&mouseX=el.offsetTop&&mouseXelement.parentNode.replaceChild（element，element）
想要的效果是什么？DIV应该是不断来回运动的？@YuriyGalanter我正在创建的效果是在新搜索后关闭选项卡-搜索按钮包含在选项卡中。我的小提琴只是一个例子。我认为除了一些JS黑客之外，目前没有可行的解决方案，有类似的问题