Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/
The original intention was for the tab to change color to A when hovered over, and to color B when clicked on.
However, as shown in the demo, after clicking, the background color no longer changes on hover. My first attempt was to add !important to the background color of the hover effect, resulting in this outcome: http://jsfiddle.net/4FLCe/1/
This did not produce the desired result, as now the hover effect would override the background color set by JavaScript. So, I decided to apply !important to the color set in JavaScript. Unfortunately, the results were less than satisfactory, with only Opera responding correctly to my intentions.
All other browsers failed to implement the JS functionality properly. You can see the disappointing outcome in this updated demo: http://jsfiddle.net/4FLCe/2/
Therefore, the question remains: how can I achieve both a functioning hover effect where the selected tab's background takes precedence over the hover effect and ensure consistent results across all major browsers (IE, Safari, Chrome, Firefox)?