[DayLateDon]

Hello ...

[I mistakenly posted this in the Developer forum. Moderators, please delete that thread.]

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?

[DayLateDon]

Originally Posted by Catfish_Man

Get the offsetTop property of the element from js during the resize; I believe this forces a relayout, which might update the display.

That doesn't seem to help me.

Of course, the widget's well aware of layout changes, since everything's moving during the resize. The widget (apparently) just isn't recalculating the relative position of the cursor. Then again, when I move the mouse manually afterwards and trigger the ":hover" state on a separate tab, the widget obviously *is* recalculating the relative position of the cursor, but isn't de-hovering the old tab appropriately. Hmmmm ...

I guess I should give up ":hover" and try "onmouseover/onmouseout", setting things up so that mousing over any tab will update the appearance of all of them. That's nowhere near as elegant as ":hover", though.