- This topic is empty.
October 29, 2018 at 9:10 pm #278231
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.
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.October 30, 2018 at 5:55 am #278248
Thanks for the answer, not sure but maybe it is possible with more or less a css similar to this:
https://jsfiddle.net/ThinkingStiff/dWHzF/October 30, 2018 at 7:25 am #278253BeverleyhParticipant
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/LgorOPOctober 30, 2018 at 11:02 am #278266
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) :-)October 30, 2018 at 2:28 pm #278269arvasavinParticipant
Thank you beverlyH
- The forum ‘CSS’ is closed to new topics and replies.