jQuery UI buttons - keep active state, ignore hover state

Question

As mentioned in another question earlier, I have a system that displays content and highlights a button based on the hash tag. This is working fine for the most part, but if you hover the button, it then loses it's active state. Here's a [working example][1] of the problem. I've tried `.hover(function() {return false;});` but unfortunately this didn't work (though I guess I didn't expect it to...!). I've also tried disabling the button (then re-enabling it when you click another one) which was perfect in Firefox, but the text was greyed out in IE7. Would greatly appreciate any help or suggestions, thank you :)

Accepted Answer

To start with your button are submitting the #, it doesn't make the link go to another page but it generates some unwanted scrolling. You should avoid that like this.

```
$('#showScarringReports').click(function(ev){ ev.preventDefault(); });
```

After if you want the active state to stay you can disable the event handler which make it switch from active back to what it was. So again with first one as example.

```
$('#showScarringReports').unbind('mouseout keyup mouseup hover');
```

Once active it will stay active, to remove the active state then just remove the class ui-state-hover from the button.

jQuery UI buttons - keep active state, ignore hover state

Solution

Problem