Highlighting TR/TD tag with CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Highlighting TR/TD tag with CSS

How do I highlight a TR when the mouse rollsover the link?

bartainer

3:20 pm on May 11, 2006 (gmt 0)

Hello,

Righ now I'm using an image in DW to give a rollover effect; however. I was told there is an alternative way without using images? Something like #div in the CSS, I'm not sure what the # is for? I'm pretty good with CSS, but not advanced. Please help.

Thank you.

birdbrain

5:06 pm on May 11, 2006 (gmt 0)

Hi there bartainer,

try this, it may suit your requirements...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
#table1 {
 margin:30px auto;
}
#table1,#table1 td {
 border:1px solid #000;
}
a.red ,a.blue ,a.green {
 display:block;
 width:161px;
 line-height:100px;
 background-color:#fff;
 color:#000;
 text-align:center;
 text-decoration:none;
 cursor:default;
}
a.red:hover {
 background-color:#fee;
 color:#000;
}
a.blue:hover {
 background-color:#eef;
 color:#000;
}
a.green:hover {
 background-color:#efe;
 color:#000;
}
-->
</style>
</head>
<body>
<table id="table1"><tr>
<td><a class="red" href="#">this is a cell</a></td>
<td><a class="red" href="#">this is a cell</a></td>
<td><a class="red" href="#">this is a cell</a></td>
</tr><tr>
<td><a class="blue" href="#">this is a cell</a></td>
<td><a class="blue" href="#">this is a cell</a></td>
<td><a class="blue" href="#">this is a cell</a></td>
</tr><tr>
<td><a class="green" href="#">this is a cell</a></td>
<td><a class="green" href="#">this is a cell</a></td>
<td><a class="green" href="#">this is a cell</a></td>
</tr></table></body>
</html>

birdbrain

Robin_reala

6:51 am on May 12, 2006 (gmt 0)

Unfortunately that code only highlights cells, not rows.

The simple way to highlight a row on hover would be something like:

tr td { background-color: blue; }
tr:hover td { background-color: green; }

Of course there's a problem with that, and of course the problem is IE. IEs 6 and less on Windows don't allow :hover on anything that's not an <a> element, so we need some Javascript to emulate this. You can either use an HTC to add :hover support for anything (google for whatever:hover) or use some specific JS to emulate just this effect. Something like:

var rows = document.getElementById('yourtable').rows;
for (i=0;i<rows.length;i++) {
 rows[i].onmouseover = highlight;
 rows[i].onmouseout = dehighlight;
}function highlight() { this.className = "highlight"; }
function dehighlight() { this.className = ""; }

and then change the CSS to:

tr td { background-color: blue; }
tr:hover td, tr.highlight td { background-color: green; }