Refresh the browser hover effect after a DOM change

Question

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.

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.

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).

UPDATE

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

Answer 1

element.parentNode.replaceChild(element, element);