Question

I’ve got a text button with a :hover color change. Clicking the button shrinks the div it sits within, and thus moves the button out from under the mouse cursor that clicked it. Doing so leaves the button in the :hover state, so it doesn’t change back to the non-hover color. Is there any way I can force the button out of the hover state (since I know it won’t be hovered on for sure at that moment)?

jsfiddle example here: http://jsfiddle.net/forgetcolor/vYjMv/6/

p.s.: i know on that jsfiddle example as soon as i move the mouse myself the state changes, but unfortunately on my own example it doesn’t—not until i move over the button again. i’m guessing this is because in my case what’s left underneath the mouse cursor when the shrinking element moves is an iframe with a PDF in it (?)

Answer 1

I would not use a :hover selector in the CSS, but a .hover class instead. Then you can explicitly assign this class to mouseover/mouseout, and explicitly remove it when needed.

Does this solve your problem?

UPDATE

Suggestion: use jQuery’s $().hover().