CSS Hover

Agar tampilan suatu website terlihat lebih hidup, menarik dan interaktif terkadang design yang baik saja tidak cukup. Terkadang kita perlu menambahkan slider, popup dan sebagainya. Salah satu yang sering digunakan yaitu efek Hover pada CSS. Hover pada CSS adalah suatu fungsi yang hanya berjalan apabila kursor berada diatas suatu objek tertentu.

Bagaimana cara melakukannya? Apa saja kode yang digunakan?

Pertama-tama buat suatu element pada html dan atur / tambahkan css-nya.

<!DOCTYPE html>

<html>

<head>

<style>

h1:hover {

background-color: darkslategrey;

color: white;

}

</style>

</head>

<body>

h1>Webhozz Media</h1>

</body>

</html>

 

Pada contoh diatas saya menambahkan efek hover pada <h1>……</h1> agar warna tulisan dan warna backgroundnya berubah saat di-hover. Selain warna kita bisa menambahkan property dan value css apa saja sesuai yang kita inginkan.

 

Vreated By: Sanjaya Sapta