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

【问题标题】：Refresh the browser hover effect after a DOM changeDOM 更改后刷新浏览器悬停效果
【发布时间】：2014-07-12 22:11:09
【问题描述】：

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

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

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

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

我想如果最坏的情况发生在最坏的情况下，我可以通过 mouseenter、mouseleave 和 DOMAttrModified 类手动完成所有操作。但这听起来很痛苦，甚至可能在 javascript 方面代价高昂（我必须手动识别鼠标是否位于我的元素范围内）。

更新

好的，所以我真的不能碰DOMAttrModified，性能命中是massive。

【问题讨论】：

想要的效果是什么 - DIV 应该来回不断运动？
@YuriyGalanter 我正在创建的效果是在新搜索后关闭选项卡 - 搜索按钮包含在选项卡中。我的小提琴只是一个例子。
我认为目前除了一些 JS hack 之外没有可行的解决方案，有类似的问题 stackoverflow.com/questions/20886903/…

标签： javascript css hover mouseover

【解决方案1】：

element.parentNode.replaceChild(element, element);

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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区间来演示效果(demo)这个可以调整。但同样，我不确定在 setInterval 上提取此信息的可行性

【讨论】：