Custom hover action in mega menu

Hi I would like to know how I can apply custom hover actions to my menu? Currently I’ve got a mega menu and I’m using a hover effect that fades the color of the active item (the page I’m at) and the item I’m hovering over. This is the default effect. Now I want the menu to load as it does right now. So with the active item selected, but when I hover over an item I want the active item to drop the selection temporarily so that only the hovered item is selected. When the mouse leaves the menu it should default back to the active item being selected. (the situation as it was) Could you give me some pointers about where to look? Thanks!!

(I’m using the Magazine Pro cloud template)

• This topic was modified 5 years by mbos01.

Thanks for the reply.

No that doesn’t really answer my question. I know how to change the color. What I’m looking for is a way for the current active menu item to lose it’s selection (the highlighted menu item) once I hover over the menu and to be selected again once the mouse no longer hovers over the menu.

Thanks!

Any information would be greatly appreciated

I fixed it by adding custom css


.tdb-block-menu:hover {
background-color: #003863;
}
.tdb-menu-item:hover {
background-color: rgba(170,170,170,0.22);
}


Now when I hover over the menu only the item I’m hovering over is selected. When the mouse leaves the menu selection jumps back again to just the active item.