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 Mike Lewis 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
- Thread starter mdr2271
- Start date
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"
<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
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
- Thread starter
- #4
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>
<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>
Do it this way
<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
Code:
<style>
tr:hover.tablerow {background-color: #CCCCCC}
</style><honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
- Thread starter
- #7
Either seems to work.
Hmm, I guess yours makes more sense though.
<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
Hmm, I guess yours makes more sense though.
<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2
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
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
ointer;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>
<style type="text/css" media="screen, print">
.subfile {border:0;width:90%;border-collapse:collapse;}
.subfile td {cursor
ointer;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
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question