cara membuat table menjadi blur saat di hover menggunakan css

Pada tutorial kali ini anda akan belajar bagaimana cara membuat table menjadi blur saat di hover menggunakan css .

Hai kembali lagi di tutorial dumet school , untuk topik artikel kali ini saya akan membahas mengenai css yaitu cara membuat table menjadi blur saat di hover, tidak semua kasus yang ada tablenya di butuhkan konsep blur seperti ini ya ini hanya jika kalian membutuhkannya dalam website anda 🙂

oke jadi seperti ini maksud dari blur pada table tersebut, jadi kita memiliki table dan table tersebut pasti memiliki field dan record , nah yang saya inginkan adalah jadi saat cursor mengarahkan ke record tertentu record yang lainya menjadi blur dan tidak kelihatan. itulah konsep sederhananya.,

oke kita mulai saja ya :

HTML

<html>
<head>
    <title></title>

    
</head>
<body>
    <table>
  <tbody>
    <tr>
      <th>Baris</th>
      <th>Kolom 1</th>
      <th>Kolom 2</th>
      <th>Kolom 3</th>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
  </tbody>
</table>
</body>
</html>

CSS

table th,table td{
  border:1px solid #eee;
  padding:5px 10px;
  text-align:center;
}
/* Efek Zebra */
table tr:nth-child(odd){
  background:#e0e0e0;
}
table tr:nth-child(even){
  background:#f0f0f0;
}
/* Blur seluruh table saat hover */
table tbody:hover td{
  color:transparent;
  text-shadow:0 0 2px #555;
}
/* baris yang ditunjuk mouse jgn diblur*/
table tbody tr:hover td{
  color:#000;
  text-shadow:none;
}

setelah kalian salin maka hasil jadinya akan seperti ini :

Jadi record yang lain akan blur saat kita hover record tertentu, bagaimana menarik bukan ? silahkan coba ya 🙂

Oke itu saja dari saya untuk tutorial tentang cara membuat table menjadi blur saat di hover menggunakan css, sampai bertemu pada artikel selanjutnya.

Cara membuat Table Menjadi Blur Saat Di-hover

Kategori