Pengantar: Tutorial ini adalah tentang cara membuat efek hover over di CSS. HTML: Untuk ini, kita membutuhkan beberapa HTML dasar untuk ditata dengan CSS kita.
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>
<div class='hoverable'>
<p> ini adalah paragraph </p>
</div>
</body>
</html>CSS: Sekarang kita memiliki beberapa elemen HTML dasar, kita ingin memberikan beberapa elemen gaya CSS dasar.
.hoverable {
width: 400px;
height: 70px;
text-align: center;
}Kelas-Pseudo: Ada kelas-kelas tertentu dalam CSS (Pseudo-class) yang mirip dengan efek pendengar, misalnya, jQuery. Ini berarti bahwa kelas-kelas tersebut diaktifkan dalam kondisi tertentu; pseudo-class yang akan saya gunakan untuk tutorial ini adalah 'hover' - ini akan diaktifkan setelah mouse pengguna memasuki area elemen dengan pseudo-class 'hover'. Pertama kita perlu membuat kelas kita dengan ekstensi pseudo-class 'hover', kita melakukan ini dengan menulis jenis pengenal (. Untuk kelas, # untuk ID), diikuti dengan nama kelas / ID, diikuti oleh titik dua (:) dan kemudian nama pseudo -kelas, dalam kasus kami adalah 'hover'.
.hoverable:hover {
}Sekarang, setelah mouse pengguna memasuki area elemen HTML dengan kelas ‘hoverable’, kelas ‘hover’ di atas akan diaktifkan. Mari kita tulis di perbatasan untuk efek ini.
.hoverable:hover {
border-bottom: 1px solid #ffffff;
}Jadi! Ini sumber lengkapnya.
<html>
<head>
<style>
.hoverable {
width: 400px;
height: 70px;
text-align: center;
}
.hoverable:hover {
border-bottom: 1px solid #ffffff;
}
</style>
</head>
<body>
<div class='hoverable'>
<p>Ini adalah paragraph</p>
</div>
</body>
</html>