Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Highlight Row on Hover

Status
Not open for further replies.

mdr2271

Programmer
Sep 14, 2005
42
US
If I have a class of .tablerow how I would make the background color of the whole row change to #CCCCCC when one hovers over any cell? I have tried things like

.tablerow:Hover {background-color: #CCCCCC}
.tablerowHover
.tablerow Hover

and none seem to work.
 
You need to use javascript as IE doesn't understand the :hover psuedoclass on anything other than <a> elements.

If you do what you have done in the first option and view the page in Firefox then I think it may work.

I can't remember if the psuedoclass is case sensitive, but you may well find you need to use a lower case "h" on "hover"
Code:
.tablerow:hover {background-color: #CCCCCC;}

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
 
The first one will work, but only in modern browsers, where IE6 is not considered modern enough. For IE you will have to use onmouseover and onmouseout events.
 
Here is a very simple bit of code to see if this works (still doesn't for me):

<html>
<head>
<title>Untitled</title>
</head>
<style>
.tablerow:Hover {background-color: #CCCCCC}
</style>

<body>
<table border="1">
<tr class="tablerow">
<td> test </td>
<td> test </td>
</tr>
<tr class="tablerow">
<td> test </td>
<td> test </td>
</tr>
</table>


</body>
</html>
 
Actually, it is
Code:
tr.tablerow:hover { background-color:  #CCCCCC; }
FF apparently does not apply pseudo classes just to classes. An element has to be mentioned distinctly.
 
Both of those ways work. Thank you very much.
 
Actually, mdr's test page works fine on Firefox, provided you add a DOCTYPE to the start. Apparently hover behaviour is different in quirks mode.

It still won't work in IE of course. If it's important to you, you could consider using Dean Edwards IE7 script - - to make IE6 behave in a bit more up-to-date manner.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
i'm using this script for IE:

<style type="text/css" media="screen, print">
.subfile {border:0;width:90%;border-collapse:collapse;}
.subfile td {cursor:pointer;font-family:Courier;font-size:.75em;font-weight:normal;padding-left:3px;color:#000000;
border:1px solid #D6DDE6;}
.subfile th{font-family:sans-serif;font-size:.75em;font-weight:bold;text-align:left;text-overflow: ellipsis;
padding-left:3px;border:1px solid #828282;border-color:threedhighlight threedshadow threedshadow threedhighlight;
background-image:url(/images/header-bg.gif);}
.subfile td.nav {background-color:menu;cursor:auto;border:0;margin:0;padding:0;}
.subfile tr.regrow {background-color:#FAFAFA;}
.subfile tr.altrow {background-color: #DFE7F2;}
.subfile tr:hover, .subfile tr.hilite {background-color:#0fD7E2;}
.subfile p, td, th {font: 0.8em Arial, Helvetica, sans-serif;}
</style>


<script language="JavaScript" type="text/javascript">
<!-- Table row's alternate color (Highlights row on museover - 'cuz IE sucks, not needed on Mozilla).
function subfileInit() {
var tables = document.getElementsByTagName('table');
for (var t=0; t<tables.length; t++) {
if ('subfile'==tables[t].className) {
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
rows.onmouseover = function() {
this.className += ' hilite';}
rows.onmouseout = function() {
this.className = this.className.replace('hilite', '');
}}}}}
// window.onload=subfileInit;
//-->
</script>

<body onload="subfileInit();">

<table class="subfile" align="center" CellPadding="0" CellSpacing="0" >
<tr>
<th scope="col">Victim's Name</th>
<th scope="col">Address</th>
<th scope="col">City</th>
<th scope="col" style="text-align:center">State</th>
<th scope="col">Zip</th>

</tr>
<tr class="regrow">
<td>Joe, Doe</td>
<td>2000 B. Glen Ave.</td>
<td>Baltimore</td>
<td style="text-align:center">MD</td>
<td>21111-4001</td>

</tr>
<tr class="altrow">
<td>Anonymous</td>
<td>346 E 17th St</td>
<td>New York</td>
<td style="text-align:center">NY</td>
<td>10001-5000</td>

</tr>
</table>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top