更改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屋!