SEMI-SCRIPT: CSS : Pseudo Class

Assallamualikum kawan , disini saya akan sedikit berbagi post tentang pembuatan pseudo class dengan css.

PENGERTIAN
Pseudo Class dalam CSS digunakan untuk menentukan keadaan khusus dari suatu unsur.

ALAT & BAHAN

Pc /Laptop
Sublime Text
Browser

Kali ini saya akan membuat file html yang akan membuat button hover dan tulisan yang apabila kursor di tempatkan pada tulisan itu maka akan muncul notifikasi di bawahnya.

buat file html , dan masukan css di dalam tabel

!DOCTYPE html>
<html>
<head>
   <title>CSS Pseudo Kelas</title>
   <style type="text/css">
   h1 {
       font-family: raleway;
       color: red;
       text-align: center;
   }
   button {
       background-color: blue;
       text-align: center;
       font-family: raleway;
       font-size: 15px;
       padding: 20px 50px;
   }
   button:hover{
       background-color: green;
   }
   p {
       font-family: raleway;
       display: none;
       background-color: yellow;
       padding: 20px;
   }

   div:hover p {
       display: block;
   }
   </style>
</head>
<body>
<center>
<h1> Belajar CSS Pseudo </h1>
<br>
<br> <button class="button"> Arahkan Kursor ke sini </button>
<br>
<br>
<br>
<div> Arahkan kursor anda pada tulisan ini !
   <p> Jeng Jeng , Saya akan muncul ! </p>
</div>
</center>
</body>
</html>

Maka saat kita run di browser dan kursor kita arahkan pada button dan tulisan yang terjadi adalah akan seperti gambar di bawah ini :

KESIMPULAN :
Pada penggunaan Pseudo Class biasanya digunakan unuk memberi notifikasi / keterangan tentang tulisan yang yang kurang jelas. Dengan cara mengarahkan kursor ke tulisan tersebut.