Cara Menampilkan Elemen di Hover

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 12, 2021

Di bawah ini kita akan mempelajari cara menampilkan elemen saat mengarahkan kursor.

<!DOCTYPE html>
<html>
<head>
<style>
.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: red;
}
</style>
</head>
<body>

<h2>Contoh Menampilkan Elemen saat Melakukan Hover</h2>

<div class="myDIV">Hover over me.</div>
<div class="hide">Saya ditunjukkan ketika seseorang mengarahkan kursor ke div di atas.</div>

</body>
</html>

Cara Menampilkan Elemen di Hover

Langkah 1) Tambahkan HTML:
Contoh

<div class="myDIV">Hover over me.</div>
<div class="hide">Saya ditunjukkan ketika seseorang mengarahkan kursor ke div di atas.</div>

Langkah 2) Tambahkan CSS:
Contoh

.hide {
  display: none;
}

.myDIV:hover + .hide {
  display: block;
  color: red;
}

Penjelasan Kode

Sibling Selektor yang berdekatan (+) akan memilih semua elemen yang merupakan sibling selektor yang berdekatan dari elemen yang ditentukan.

Kata “adjacent” berarti “segera mengikuti”, dan contoh di atas memilih semua elemen dengan class = ". Hide", yang ditempatkan tepat setelah elemen dengan class = ". MyDIV", saat melakukan hover.