Bagaimana menampilkan elemen saat kursor mouse berada di atas

Belajar bagaimana menampilkan elemen saat kursor mouse berada di atas

Tempatkan kursor mouse di atas saya.
Saat seseorang menempatkan kursor mouse di atas div di atas, saya akan muncul.

Bagaimana menampilkan elemen saat kursor mouse berada di atas

Langkah pertama - Tambahkan HTML:

<div class="myDIV">Tempatkan kursor mouse di atas saya.</div>
<div class="hide">Saat seseorang menempatkan kursor mouse di atas div di atas, saya akan muncul.</div>

Langkah kedua - Tambahkan CSS:

.hide {
  tampil: tak terlihat;
}
.myDIV:hover + .hide {
  tampil: blok;
  warna: merah;
}

Coba sendiri

Pengertian contoh:

Pemilihan penjuru yang dekat (+) Memilih semua elemen yang berdekatan dengan elemen yang ditentukan.

Arti kata "dekat" adalah "sebagai berikut", contoh di atas memilih semua elemen yang memiliki class=".hide" Elemen-elemen ini, yang disusun mendahului dalam hal yang diatur di atas dengan class=".myDIV" setelah elemen.

Halaman yang berhubungan

Panduan:Perhimpunan CSS