Вот пример CSS, как показать скрытый div (при наведении):
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
и
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
Могу ли я показать один div и скрыть другой одновременно, используя только CSS? Вот пример использования JS для этой цели: [
][1]Вот код
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
<div class="showhim">
HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
если другой div является братом или сестрой/ребенком или любой комбинацией родителей да
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .hideme{
display : none;
}
.showhim:hover ~ .hideme2{ //~ sibling selector
display:none;
}
<div class="showhim">
HOVER ME
<div class="showme">hai</div>
<div class="hideme">bye</div>
</div>
<div class="hideme2">bye bye</div>
Пробовали ли вы что-то подобное?
.showme{display: none;}
.showhim:hover .showme{display : block;}
.hideme{display:block;}
.showhim:hover .hideme{display:none;}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="hideme">bye</div>
</div>
Я не знаю причин, почему это не должно быть возможным.