Row Hover pada Tabel dengan CSS

Tutorial kali ini adalah tentang menghias tabel dengan css. Namun di artikel kali ini dikhususkan pada bagian row hover.
Apa maksudnya? Jadi begini, sebenernya masalah ini baru saja saya alami..

Saya buat tabel seperti biasa, dan hasil yang saya inginkan adalah ketika kursor mengarah ke salah satu record, maka seluruh record dalam row (baris) tersebut background-color nya berubah.. Namun yang saya dapatkan justru hanya satu record (dalam tag "td") saja yang berubah warna backgroundnya.
Lalu saya coba pada cssnya dengan menggunakan parameter:

tr:hover {background:#kodewarna}

Namun parameter di atas justru tidak menghasilkan apa - apa.. Setelah dicoba diulik akhirnya berhasil juga dengan script berikut:

tr:hover td {background:#kodewarna}

Jadi contoh script selengkapnya seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Row Hover pada Tabel dengan CSS</title>
</head>

<body>

<table id="rowhover">
 <tr><th>Tabel Header 1</th><th>Tabel Header 2</th><th>Tabel Header 3</th></tr>
    <tr><td>Record Baris Pertama</td><td>Record Baris Pertama</td><td>Record Baris Pertama</td></tr>
    <tr><td>Record Baris Kedua</td><td>Record Baris Kedua</td><td>Record Baris Kedua</td></tr>
    <tr><td>Record Baris Ketiga</td><td>Record Baris Ketiga</td><td>Record Baris Ketiga</td></tr>
    <tr><td>Record Baris Keempat</td><td>Record Baris Keempat</td><td>Record Baris Keempat</td></tr>
</table>

<style type="text/css">
#rowhover {font-family:Arial, Helvetica, sans-serif; text-align:left; font-size:12px; line-height:1.4em; padding:4px; margin:0px; border:1px solid #999; border-collapse:collapse; border-spacing:0px;}
#rowhover th {background:#999; padding:10px; color:#000;}
#rowhover td {padding:10px; text-align:left;}
#rowhover tr:hover td {background:#CCCCCC;}
</style>

</body>
</html>

Download source code : disini

Jadi seperti itulah tips membuat hover pada satu baris dengan css.. Jika ingin tampilan lebih cantik silahkan di edit saja css-nya..

1 comment

68rmxzcawrJanuary 20, 2023 6:48 AM
In addition, the slot developers can add a narrative that makes players wish to progress. Finally, an online leaderboard 배트맨토토 can improve competitiveness amongst players. With advances in gaming applied sciences like Unreal Engine 5, building photograph realistic environments is less complicated}.