Seperti halnya pada link hidup yang memiliki warna biru, jika mouse didekatkan pada tulisan tersebut dan yang akan terjadi adalah adanya efek Underline pada text tersebut. Itu dikarenakan css yang memiliki Pseudo-class. Contohnya seperti tulisan ini yang jika cursor didekatkan maka tulisan tersebut akan memiliki background abu-abu. Bagaimana dengan judul blog saya? yep saya menggunakan cara ini untuk membuatnya dan tidak memerlukan kode-kode javascript didalamnya.
Saya tidak akan menjelaskan panjang lebar tentang hal ini, namun saya akan memberikan beberapa contoh yang harus anda pahami.
Ini yang sering dipakai oleh banyak website, dan hanya hover standar merubah dirinya sendiri. .contoh1:hover{background:lightblue;}
Ini adalah hover yang merubah sesuatu dari elemen dalam ketika elemen luar telah dekat dengan kursor. .contoh2:hover .inner2{border:3px solid lightblue;}
Dapat disimpulkan bahwa ketika kita hover element berClass .contoh2, maka .inner2 akan merubah sesuatu sesuai dengan kode yang diberikan.
<style>
.contoh1, .contoh2 {
height:100px;
width:100px;
background:red;
padding:20px;
margin-bottom:5px;
}
.inner2{
height:70px;
width:50px;
background:yellow;
}
/* contoh1 */
.contoh1:hover{background:lightblue;}
.contoh2:hover .inner2{border:3px solid lightblue;}
</style>
<div class="contoh1" title="type biasa"></div>
<!-- batas -->
<div class="contoh2" title="type biasa">
<div class="inner2"></div>
</div>ini adalah kode keseluruhan diatas, anda juga dapat otak-atik pada halaman Live Preview di Blog ini.
Ada masalah seputar ini? anda mungkin bingung apa yang saya gunakan untuk judul sehingga terlihat ada animasi jika diberikan efek HOVER bukan? saya hanya menggunakan properti CSS Transition. Anda juga mungkin bisa search pada blog ini, ataupun bisa langsung lihat di Google.