Is it feasible to eliminate the "active" class from menu items when hovering over a different menu item?
If you're interested, there is a functional demonstration here. By default, the home button is assigned the "active" class. I want this class to be removed whenever another menu item is hovered over. This way, only one menu item will have the overlay displayed on top of it. Is it possible to achieve this using CSS alone? Or will I need some complex JavaScript?
The code snippet below is responsible for displaying the button overlay on my menu items:
#menu li a.active,
#menu li a:hover{
text-decoration: none;
background: url('../images/menu_button_overlay.png');
background-repeat: no-repeat;
background-position: center top;
background-size: 30px 10px;
}
Appreciate any help or advice!