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..
