Berikut adalah contoh CSS bagaimana menampilkan div tersembunyi (saat hover):
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
dan
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
Dapatkah saya menampilkan satu div dan menyembunyikan div yang lain pada saat yang sama dengan menggunakan hanya CSS? Berikut ini contoh bagaimana menggunakan JS untuk tujuan ini: [
][1]Berikut ini adalah kodenya
.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>
jika div lainnya adalah saudara kandung/anak, atau kombinasi dari, dari orang tua ya
.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>
Sudahkah Anda mencoba sesuatu seperti ini?
.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>
Saya tidak tahu alasan mengapa hal itu tidak mungkin dilakukan.