Efek Hover
Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 8 dari 43.
pseudo-class :hover memungkinkan kamu mengubah gaya sebuah elemen saat pengguna mengarahkan mouse ke atasnya.
Berikut contoh sederhana yang mengubah warna teks saat kamu mengarahkan kursor ke tombol:
button {
color: black;
}
button:hover {
color: red;
}Dalam contoh ini, teks tombol berwarna hitam secara default, tetapi saat kamu mengarahkan kursor ke tombol, teksnya berubah menjadi merah.
Tantangan
MudahKamu memiliki tombol yang gayanya perlu berubah saat diarahkan. Tugasmu adalah:
- Gunakan pseudo-class
:hoveruntuk mengubah warna latar belakang tombol menjadi hijau saat pengguna mengarahkan kursor ke tombol tersebut. - Terapkan bayangan kotak pada tombol selama efek hover agar tombol terlihat terangkat. Gunakan
box-shadowseperti ini:
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);Ini menambahkan bayangan dengan offset, blur, dan warna.
Coba sendiri
<html>
<head>
<title>Hover Effects</title>
<style>
.hover-button {
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
}
/* CSS solution goes here */
</style>
</head>
<body>
<button class="hover-button">Hover over me!</button>
</body>
</html>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Menguasai CSS
1Menguasai Selector, Kombinasi
PengantarSelector KeturunanSelector AnakSelector Saudara SebelahSelector Saudara UmumTantangan Rangkuman7Membangun dengan CSS Grid
Dasar-Dasar GridPenempatan Item dengan grid-rowArea BernamaTantangan RangkumanLatihan sendiri: Playground Web