Kelas Psedue di CSS- Efek Hover

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

by abdurrahman October 17, 2020

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>