[Resolved] change color for unused menu items

[Stefan]

Hi, I`ve got a question again. Is there a css, which I click or hover on one menu item and the other items change their color to (e.g.) grey, so that only the “active” menu items is colorful?
Thanks 🙂

[Ying]

Hi there,

Do you mean the color change only happens when a link is hovered?

Try this CSS to set the other menu items link color to grey when one of the menu item is hovered.

.main-navigation ul:has(li:hover) li:not(:hover) a {
    color: grey;
}

[Stefan]

Hi thanks for your reply but there is no change, when i hover over a menu item :-(. Maybe its because my question wasn`t exactly enough (sorry for that).
if you coult visit my site (it is juist at the beginnig of creating again 🙂 you could see what i mean. The menu items “Über Uns”, “Aktuelles”, “Ereignisse …”,… should change color, when i hover or click on one item (that items shouldn`t change its color) to grey (like fade out). Its for fokusing on the clicked item. when releasing, all colors should should change to origin again. Hope you know what I mean (sorry for my explanation 🙂 )

[David]

Hi there,

try this CSS:

.main-navigation .main-nav ul:hover li:not(:hover) {
    opacity: 0.5;
}

[Stefan]

Hey David,
thanks for the css. It looks good. One Question remains. Is it possible, that the submenu keeps keeps its opacity?

[David]

Try:

.main-navigation .main-nav>ul:hover > li:not(:hover) {
    opacity: 0.5;
}

If that don’t work, can you share a link to where i can see it ?

[Stefan]

It works fine. Thanks a lot

[David]

Glad to hear that !

[Author]

Posts