DOM 更改后刷新浏览器悬停效果 [英] Refresh the browser hover effect after a DOM change

问题描述

我有一个元素，它的 css 在 :hover 下被更改.我还有一些改变元素高度的javascript.但是，如果在 :hover 状态处于活动状态时触发 javascript，即使高度变化将元素从鼠标下方移出，该状态仍然存在.

I've got an element whose css is altered under :hover. I've also got some javascript that changes the height of the element. However if the javascript fires while the :hover state is active the state remains even though the height change moves the element out from underneath the mouse.

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

Also since the javascript is fired by a click event within the element. This effect occurs on touch screens too.

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

I want to know if there's some way of coping with this issue. Can I force the browser to re-calculate hover (or mouseover etc)? Looking at this question, I'm not optimistic.

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

I've created a fiddle to demonstrate the issue.

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

I guess if the worst comes to the worst I could do it all manually with classes, mouseenter, mouseleave and DOMAttrModified. But that sounds like a pain and may even be costly in terms of javascript (I'll have to manually identify whether the mouse sits within the bounds of my elements).

更新

好的，所以我真的不能触摸 DOMAttrModified，性能损失是 大量.

OK, so I really can't touch DOMAttrModified, the performance hit is massive.

推荐答案

element.parentNode.replaceChild(element, element);

element.parentNode.replaceChild(element, element);

这篇关于DOM 更改后刷新浏览器悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！