Skip to content

Instantly share code, notes, and snippets.

@jeffjohnson9046

jeffjohnson9046/td-hover-test.html

Created May 7, 2014 15:43
Show Gist options
  • Save jeffjohnson9046/7a7cb17e776b45ed6736 to your computer and use it in GitHub Desktop.
Save jeffjohnson9046/7a7cb17e776b45ed6736 to your computer and use it in GitHub Desktop.
Download ZIP
TD Hover - Different Color for Each Column. Seems to work for all major browsers (IE8+)
Raw
td-hover-test.html
<!DOCTYPE html>
<html>
<head>
<title>Table Hover CSS Test</title>
<style>
th {
font-weight: bold;
font-size: 16px;
text-align: center;
}
tr td.state:hover {
background-color: #bbd3e7 !important;
color: #333 !important;
cursor: pointer;
}
tr td.city:hover {
background-color: #f4c2c2;
color: #333;
cursor: pointer;
}
tr td.zcta:hover {
background-color: #f4d8ab;
color: #333;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>California</th>
<th>San Diego</th>
<th>92037</th>
</tr>
</thead>
<tbody>
<tr>
<td class="state">CA first value</td>
<td class="city">San Diego first value</td>
<td class="zcta">92037 first value</td>
</tr>
<tr>
<td class="state">CA second value</td>
<td class="city">San Diego second value</td>
<td class="zcta">92037 second value</td>
</tr>
<tr>
<td class="state">CA third value</td>
<td class="city">San third second value</td>
<td class="zcta">92037 third value</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment