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.

What is the desired effect - the DIV should be in constant motion back and forth? — Yuriy Galanter, May 23 '14 at 15:01
@YuriyGalanter the effect I'm creating is a tab closing following a new search - the search button is contained within the tab. My fiddle is just an example. — Aidan Ewen, May 23 '14 at 15:07
I don't think there's currently a viable solution besides some JS hack, had similar issue http://stackoverflow.com/questions/20886903/css-hover-works-only-when-mouse-moves — Yuriy Galanter, May 23 '14 at 15:18

score 2 · Answer 1 · answered Dec 28 '17 at 08:59

2

element.parentNode.replaceChild(element, element);

answered Dec 28 '17 at 08:59

Artemiy StagnantIce Alexeew

813
1
5
9

score 0 · Answer 2 · answered May 23 '14 at 15:50

The mouseleave event is never firing if you just leave your cursor there because technically you're not leaving the div that has the hover state.

I would recommend not using mouseover. It's a pain. Use mouseenter instead.

I do not know of any viable solutions, other than working around it by testing if the div is in it's :hover state, and then creating a separate function with a timeout to return it to it's original position, size, etc.

score 0 · Answer 3 · answered May 23 '14 at 15:51

I am not sure at all if this is viable in a real-life scenario, but this is only hack I could see. Basically on window.mouseMove event save current coordinates of the mouse and then on setInterval compare it to coordinates of the element to determine whether element is "hovered". I have to use setInterval because otherwise unless mouse moves - no event happens:

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)

I've used 1000 interval to demonstrate the effect (demo) this can be adjusted. But again, I am not sure how feasible is pulling this info on setInterval

Refresh the browser hover effect after a DOM change

3 Answers3

Linked