Hide bottom menu active item border, while hovering another menu item with css

[snippet248]

Currently my code is pretty similar to the example below, in which if I hover another menu item that’s not the one of the current active page, both bottom borders are displayed, I’m trying to figure out how to hide the bottom border (like changing the color) for the active menu item when I hover another menu item.
Working example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_navbar_border
Last I know it can be done with javascript by adding and removing classes, but I also know it should be possible with only css and that’s what I’m after.

[Beverleyh]

As far as I’m aware it isn’t possible with CSS alone because there is no such thing as a previous sibling selector, or a parent selector in CSS. You can only target sibling elements that come after the one being hovered, or child elements of the one being hovered.

[snippet248]

@Beverleyh
Thanks for the answer, not sure but maybe it is possible with more or less a css similar to this:
https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered
https://jsfiddle.net/ThinkingStiff/dWHzF/

[Beverleyh]

If you’re taking about hovering over the menu container to affect/target the children, then yes, that’s possible – I mentioned that here:

You can only target … child elements of the one being hovered.

However, you originally said:

I’m trying to figure out how to hide the bottom border (like changing the color) for the active menu item when I hover another menu item.

Which is, hovering over a sibling element to affect other siblings elements, right? And that can only be done for sibling elements that come after the one being hovered (as answered in comments of the SO top answer, and demo’d in the fiddle). If any come before the hovered sibling in the markup, they won’t be affected/targeted because there is no such thing as a previous sibling selector in CSS.

But back to using the container element to target children, in the context of the menu example…

Do you mean something like this? https://codepen.io/anon/pen/LgorOP

[snippet248]

That’s pretty close, for example I could change the use of blue color in the codepen to transparent… but then If I hover the active menu item it wont display the border menu for it (I know I didn’t explain that).

I understand the points, thank you so much Beverleyh (marked as good answers) :-)

[arvasavin]

Thank you beverlyH

[Author]

Posts