Hello ...
I have a widget with a collection of tab buttons with a CSS class "tab-off" and a ":hover" variant. Likewise, there's a "tab-on" class with a ":hover" variant. (Actually, I don't intend to use "tab-on:hover", but it's helping me track the situation at hand.) My javascript properly swaps out the classes across the tab family when any one of them is clicked.
However, sometimes the tabs get "stuck" in hover-mode, probably because the widget resizes for different tab selections and the buttons move out from under the mouse instead of the mouse doing the moving. The issue has two aspects.
(1) When I click Tab A, the mouse is hovering over it, so it displays "tab-on:hover" attributes, even as the window resizes and pulls the button out from under the mouse. The widget thinks the mouse is still hovering over Tab A. (If I subsequently pass the mouse across the button, it will get unstuck and show non-hovering attributes.)
(2) When I then click Tab B, it suffers the same problem as in (1), but also, Tab A displays "tab-off:hover" attributes. The widget thinks the mouse is still hovering over Tab B *and* Tab A. Sometimes even Tab C gets stuck this way. (Again, I can get them unstuck with a pass of the mouse.)
How can I tell the widget to update the hover states automatically after the resize action?
Top