I am using some buttons with the UI Button Widget for navigation (actually anchor tags being make to buttons via button()). To show which page is currently selected (and is being viewed), I have this button given defaulting to the 'ui-state-active' class.
This doesn't play nicely with the UI Buttons widget for when you mouse over initially, nothing changes (since ui-state-active is preceding ui-state-hover). When you mouseout the element, it'll change to ui-state-default thus no longer showering this page as 'active'.
This is solved via the following JS:
- $('a.ui-state-active').mouseover(function(){
- $(this).removeClass('ui-state-active');
- }).mouseout(function(){
- $(this).addClass('ui-state-active');
- });
(haven't tested this extensively; may have unforeseen side-effects. The selector I am using is actually more specific for my HTML)
I am wondering if it would be possibly to add some logic to the UI Button Widget to be aware when an element starts off as ui-state-active and if so, return it to that state on the mouseout.