HTML table hover

IE6 (not sure about 7) doesn't support the :hover attribute on anything except anchor tags.

One way to do it is to use IE7 (not the browser), a set of scripts that you load for IE users so that they understand more CSS2 and even some CSS3 attributes.

http://dean.edwards.name/IE7/overview/

Note that visitors to your site using IE will have to have Javascript enabled for the IE7 scripts to work.
 
you can't do it with CSS. it is pretty easy to do with Javascript though. if the javascript approach will work for you, let me know and i can whip up some code for ya.
 
Tested it this morning, CSS hover doesn't seem to work in IE7 either.
 
You can do it with a combination of javascript and CSS. Just use onMouseOver and onMouseOut functions, and have them switch the cell's style accordingly.
 
maw said:
you can't do it with CSS. it is pretty easy to do with Javascript though. if the javascript approach will work for you, let me know and i can whip up some code for ya.
Click to expand...
How do you do that? Also I want to make the entire cell clickable, as in a hyperlink.
 
Here's a simple HTML example. The onMouseOver and onMouseOut attributes on the first <tr> contain the JavaScript commands to change the row's CSS class.

The row's onClick shows how to make that row act like a link to another URL.

Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<table width="100%">
<tr class="a" onMouseOver="javascript:this.className='b'" onMouseOut="javascript:this.className='a'" onClick="javascript:window.location='http://www.test.com'"><td>test</td></tr>
<tr><td>test</td></tr>
</table>
</body>
</html>

Code: 
.a
{
  background-color:white;
}

.b
{
  background-color:red;
}
 
Yep, I'd do it exactly like CSIXTY4 has written.

Just an asthetic piece of info: I usually make the mouse into a hand when you go over the cell, so the user can see that it can be clicked on.

you do this by:
Code: 
.b
{
  background-color:red;
  cursor:pointer;
  cursor:hand;
}

I think you can just use cursor: pointer; but if you use both they have to be in that order.
 
Also, you should have an actual link somewhere inside the TR just in case someone is surfing with JavaScript disabled or is using a screen reader or something like that.

Edit: Adding the word "disabled" makes a world of difference in that sentence.
 
CSIXTY4 said:
Also, you should have an actual link somewhere inside the TR just in case someone is surfing with JavaScript disabled or is using a screen reader or something like that.
Click to expand...

Wouldn't you want to put it in the <TD>? I think he wants each cell to be a link.

Code: 
<table>
  <tr>
    <td onClick="javascript:gotoURL('http://www.hardforum.com');" onMouseOver="javascript:this.className='b';" onMouseOut="javascript:this.className='a';"><a href="http://www.hardforum.com">Link</a></td>
</table>
 
doh said:
Accessibility surrenders. :eek:
Click to expand...

not sure why it would. if it's a table with tabular data that still displays all the content when JS is turned off, what's the problem?
 
The accessability problem lies in having the row/cell clickable to go to another URL.
 
CSIXTY4 said:
The accessability problem lies in having the row/cell clickable to go to another URL.
Click to expand...

ahh..OK.. i missed that part for some reason.
 
On my banking site, they have the entire cell clickable without using javascript. Also, the text inside the cell changes color.

Also, the hover thing doesn't seem to work for images.
 
I seee how they did it

a.class{display:block; height:21px; width:194px; background-image: url(/images/menu_bg.png);}

But the problem now is the text is aligned to the top. Is there a way to center it?
 
You must log in or register to reply here.
Back
Top