更改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是通过元素内的click事件触发的.此效果也发生在触摸屏上.

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.

我创建了一个小提琴来演示此问题.

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屋！