Change element display property by hovering its sibling

Question

I have a menu links and by default one of them is hidden. I'm trying to change its display when hovering some other menu link.

HTML:

 <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Hover me</a></li>
    <li><a href="#">I'm here</a></li>
</ul>

CSS:

ul li:nth-child(3) {
    display: none;
}
ul li:nth-child(2):hover ~ ul li:nth-child(3) {
    display: block;
}

What I'm doing wrong?

score 1 · Accepted Answer · answered Oct 13 '19 at 06:55

You need to remove the ul from your selector, since you've already selected the ul at the start -> ul li:nth-child(2):hover. Moreover, using display: block; will change the display of the list item so I've modified that for you

ul li:nth-child(3) {
    display: none;
}
ul li:nth-child(2):hover ~ li:nth-child(3) {
    display: list-item;
}

 <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Hover me</a></li>
    <li><a href="#">I'm here</a></li>
</ul>

Note that if you have more items in the list, all will show up at once, so in order to fix that, you can use the adjacent selector instead of a sibling like ul li:nth-child(2):hover + li

Also, user will never be able to click this link if you move hover out from the menu item, in this case, you need to nest the menu items in the UL

Change element display property by hovering its sibling

1 Answers1