Changing background on hover using CSS Classes

**AlistairH** · 08-05-2005, 10:50 AM

In order to dynamically change the background colour of a table row when the mouse is over it I am currently using something like:

Code:

<TR onMouseOver="this.style.backgroundColor='#E1EAFE'"; onMouseOut="this.style.backgroundColor='transparent'">

I'd like to get away from using mouse events and use pure styles, ideally created as classes and placed in a separate linked style sheet. Can this be done?

Please that whilst there may be a hyperlink in the row, more often than not there won't be, but I still want the background colour to change.

Cheers

**Twey** · 08-05-2005, 11:07 AM

Code:

tr:hover {
background-color: #e1eafe;
}

However, I have a horrible feeling this might not work in IE.

**jscheuer1** · 08-05-2005, 12:56 PM

Originally Posted by Twey

Code:

tr:hover {
background-color: #e1eafe;
}

However, I have a horrible feeling this might not work in IE.

It won't. IE only uses the hover pseudo class on links.

**Twey** · 08-05-2005, 01:50 PM

That's what I thought. Sorry, Alistair. The most common solution to this is to change the class with Javascript, but if you don't want to use Javascript, you're... you can't.

**AlistairH** · 08-05-2005, 02:13 PM

OK guys and thanks. I just wanted to avoid having all this extra code in a table which is going to grow quite large in the coming months. But if can't be done, it can't be done.

Cheers

**jscheuer1** · 08-05-2005, 05:21 PM

Well, using css to do background color rollovers for table cells can be done in IE, it just requires a lot more effort than Mozilla. Formatting of the contents of the cell becomes a particular challenge. Here is a rather basic example that also shows some of the ways you might use to achieve the desired formatting of text:

Code:

<html>
<head>
<title></title>
<style type="text/css">
a.bg{
width:100%;
height:100%;
text-decoration:none;
cursor:default;
color:black;
padding-top:.6ex;
margin-bottom:-.4ex;
}
a.bg:hover{
background-color:pink;
width:100%;
height:100%;
}
td.bg {
padding:0;
margin:0;
}
</style>
</head>
<body>
<table height="300" border="1">
<tr>
    <td height="225"><img src="thumb2/photo9.jpg" width="140" height="225" border=0 alt="" title=""></td>
</tr>

<tr>
    <td class="bg"><a class="bg" href="javascript:void(0);"><br><center>Hi!</center></a></td>
                                                        </tr>
                                                        </table>
                                                        
</body>
</html>

The real challenge is hiding all this garbage from other browsers.

**Twey** · 08-05-2005, 05:26 PM

No, he wanted the whole row's class to change, because sometimes there won't be a link in it.

Originally Posted by Alistair

Please that whilst there may be a hyperlink in the row, more often than not there won't be, but I still want the background colour to change.

**jscheuer1** · 08-05-2005, 05:40 PM

It can still be fudged around, the row could span all columns and therefore be a cell, to make it look like a row, another table could be put in it with no background specified. As I said before though, the real problem is hiding it all from other browsers.

**Twey** · 08-05-2005, 06:38 PM

But it's exactly the same problem with a cell as with a row: IE still doesn't support hover on it. Unless there's a way to technically make the link fill the whole cell, whilst still appearing to be the same size.

**jscheuer1** · 08-05-2005, 07:35 PM

Try my example code.

Thread: Changing background on hover using CSS Classes

Thread Tools

Search Thread

Changing background on hover using CSS Classes

Bookmarks

Bookmarks

Posting Permissions