Скрыть элемент при наведении на другой элемент

Question

Я знаю, это можно сделать в JavaScript, однако я ищу решение в CSS.

У меня есть три div.

• div # hide должно быть видимым по умолчанию, #show должно быть скрыто.
• Когда я наводил #main, #hide должен скрываться, а #show должен быть видимым.

div # show работает отлично, но #hide не скрывается, когда #main зависает. Как мы можем это сделать в css?

#show { 
 
    display: none 
 
} 
 
#main:hover + #show { 
 
    display: block 
 
} 
 
#main:hover + #hide { 
 
    display: none 
 
}

<div id="main"> 
 
    Hover me 
 
</div> 
 
<div id="show"> 
 
    Show me on hover 
 
</div> 
 
<div id="hide"> 
 
    Hide me on hover 
 
</div>

Answer 1

Вместо + вы хотите использовать ~ комбинатор для hide элемента, потому что + выбирает только следующего родственный

#show { 
 
    display: none 
 
} 
 
#main:hover + #show { 
 
    display: block 
 
} 
 
#main:hover ~ #hide { 
 
    display: none 
 
}

<div id="main"> 
 
    Hover me 
 
</div> 
 
<div id="show"> 
 
    Show me on hover 
 
</div> 
 
<div id="hide"> 
 
    Hide me on hover 
 
</div>

Answer 2

Вы только ч пр заменить селектор + с ~ причина в #hide не помещается после #main

Так что ваш код:

#show {display:none} 
#main:hover + #show { display:block } 
#main:hover ~ #hide { display:none } 

Answer 3

Вы имеете использовать Тильда «~» для этого случая.

Разница между + и ~ состоит в том, что ~ соответствует всем следующим братьям и сестрам независимо от их близости от первого элемента, если они оба имеют один и тот же родитель.

#show {display:none} 
    #main:hover + #show { display:block } 
    #main:hover ~ #hide { display:none } 

Answer 4

Попробуйте что-то вроде этого: "#main: парить + #show + #hide"

div#show { 
    display:none; 
} 
#main:hover + #show { 
    display:block 
} 
#main:hover + #show + #hide { 
    display:none 
} 

Это работает для меня.