hover effect on table rows in IE

**bobbby** · 01-15-2006, 11:43 AM

I made a table and when you hover over a row the background color changes

tr:hover {background: black;}

It works in all browsers except IE. I did some research here and now I know that IE doesnt support :hover on non-links.
BUT is there some script genious out there that found an easy way around the shortcomings of IE?

Please note that the effect im looking for is nice but it isnt crucial, so im not gonna write a page of code so IE looks nice. So nevermind if its lots of work.

**Twey** · 01-15-2006, 12:19 PM

You have to use Javascript.

Code:

<script type="text/javascript">
var t = document.getElementsByTagName("tr");
for(var i=0;i<t.length;i++) {
  var ocn = t[i].className;
  t[i].onmouseover = function() { t[i].className = "hovered" };
  t[i].onmouseout = function() { t[i].className = ocn };
}
</script>

Define a class for your hovered TRs:

Code:

<style type="text/css">
tr.hovered {
  background-color: black;
  color: white;
}
</style>

Don't forget to pair every background-color with a color. The script should go before your </body> tag.

**bobbby** · 01-15-2006, 01:34 PM

thanks for the quick reply. I'm taking a well deserved break now but I'm gonna try it tonight, so i'll get back to you.

**bobbby** · 01-15-2006, 06:49 PM

Ok, I give up! I cant seem to get it to work. There are some crucial things missing in my code. I just started learning about CSS yesterday, so my skill level isnt helping me resolve this on my own...

here's my best attempt (which, sadly isnt even close):

HTML Code:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style type="text/css">
tr.hovered {
  background-color: black;
  color: white;
}
</style>
		
	</head>

	<body bgcolor="#ffffff">		
		<table width="225" border="1" cellspacing="0" cellpadding="0" bgcolor="#33ff00">
			<tr class="hovered">
				<td>
					<div align="center">1</div>
				</td>
				<td>
					<div align="center">2</div>
				</td>
			</tr>
			<tr class="hovered">
				<td>
					<div align="center">3</div>
				</td>
				<td>
					<div align="center">4</div>
				</td>
			</tr>
		</table>
		<p></p>
			<script type="text/javascript">
var t = document.getElementsByTagName("tr");
for(var i=0;i<t.length;i++) {
  var ocn = t[i].className;
  t[i].onmouseover = function() { t[i].className = "hovered" };
  t[i].onmouseout = function() { t[i].className = ocn };
}
		</script>		
	</body>
</html>

Apparently some objects need to be defined, but me and my goldfish dont have a clue...

**Twey** · 01-15-2006, 10:21 PM

Don't specify the TRs as class="hovered". They have their class dynamically set to that by the script.

**mwinter** · 01-15-2006, 11:30 PM

Originally Posted by Twey

Code:

<script type="text/javascript">
var t = document.getElementsByTagName("tr");
for(var i=0;i<t.length;i++) {
  var ocn = t[i&#93;.className;
  t[i&#93;.onmouseover = function() { t[i&#93;.className = "hovered" };
  t[i&#93;.onmouseout = function() { t[i&#93;.className = ocn };
}
</script>

That's broken (and could be better written). The listeners will look-up the value of i when called, which will equal the length property of the collection (and yield undefined). The this operator (and feature detection) should be used instead:

Code:

if(document.getElementsByTagName) {
  (function() {
    var className = 'hovered',
        pattern   = new RegExp('(^|\\s+)' + className + '(\\s+|$)'),
        rows      = document.getElementsByTagName('tr');

    for(var i = 0, n = rows.length; i < n; ++i) {
      rows[i&#93;.onmouseover = function() {
        this.className += ' ' + className;
      };
      rows[i&#93;.onmouseout = function() {
        this.className = this.className.replace(pattern, ' ');
      };
    }
    rows = null;
  })();
}

Mike

**bobbby** · 01-16-2006, 06:34 AM

Thank you both for helping me out, but it is proven to be a tougher nut to crack than anticipated. Mike, I used your code instead and it works fine, except the rows remain black. I can see there is a mouseout function in your code but it doesnt seem to be doing anything. I would like the rows to return to their begin-state on mouseout. Is that possible?

**mwinter** · 01-16-2006, 01:00 PM

Sorry, the regular expression was broken.

I've edited my previous post to include the fix, though it's a fairly simple change you could edit yourself: where you see the two backslashes in the RegExp constructor, add an extra one to each (that is, \ -> \\).

Mike

**bobbby** · 01-16-2006, 01:24 PM

Now that you told me, it's so obvious!

Well, it's working like a charm now, so you made another script-handicapped person happy.

Thanks

**chrisf** · 09-20-2006, 08:56 PM

hi Mike, I need some help, instead of having a table row color changed on hover, my target is table's cell. though i still can't figure out how to use your code. My sample is at: http://www.sparklerange.com/menu.html

I look at your: http://www.mlwinter.pwp.blueyonder.c...der/table.html

It's even longer... to figure out, I don't need striped color. Only just hover color for table's cell for IE6.

Many thanks in advance!
Chris

Thread: hover effect on table rows in IE

Thread Tools

Search Thread

hover effect on table rows in IE

Bookmarks

Bookmarks

Posting Permissions