September 23, 2003

Stupid CSS tricks - tr/td hover

Something I stumbled across today, useful for large tables with lots of data. Pointless in some respects, as it doesn't appear to work in IE:

tr.test:hover{ background-color:lightgrey } 
td.test:hover{ background-color:white }
one two three
one two three
Posted by Bill Stilwell at September 23, 2003 02:49 PM
Comments

Here's a way to do columns, too:

http://centricle.com/lab/dom/col/

Posted by: CWillis at October 22, 2003 06:08 AM

Windows IE does not support :hover on anything but anchors, sadly.

Posted by: Shawn at October 22, 2003 10:27 AM

IE's CSS support was great 3-4 years ago... but it's essentially the same CSS support now. Particularly infuriating is the crappy support for positioning, which is the one thing NS4 managed to do right (before it would crash from an overflow). There's soem just plain ugly hacks you have to do to get things looking correct in IE.

Posted by: anthony at October 25, 2003 10:49 AM

Something I don't understand...

Posted by: Girts at November 18, 2003 12:46 PM

4 years ago I hated Netscape Navigator for not supporting standards. Now it is Microsoft that is causing us webdesigners a major headache...

Posted by: VisualMedia at February 2, 2004 05:09 AM

It seems rather foolish for Microsoft to NOT want their browser to be on the leading edge and capable of doing/being everything to all users.

Posted by: uhuru1701 at February 18, 2004 09:08 AM

Since when did microsoft service all users? Users for that matter...

Posted by: Joe at April 18, 2004 02:59 AM

HI YOU TELL ME HOW TO GET THIS INFO ONLINE

Posted by: kenny begley at April 30, 2004 01:43 PM

Kenny,

YOU ARE ONLINE RIGHT NOW AND RECIEVING THIS INFORMATION VIA THE INTERNET.

Posted by: Steve at May 19, 2004 02:56 PM

hi you can just try out this code
hover on ie also. But it uses the anchor element.


.sheet div:hover { border:4px solid #232300;background-color:#CCCCCC}
td.withLink {
height: 20px;
margin: 0px;
padding: 0px;
width: 100px;
}
td.withLink a {
display: block;
height: 20px;
width: 100px;
}

td.withLink a:hover {
background: red;
}




Bite me

Posted by: santosh dahale at June 12, 2004 03:07 AM

hi

u can try out above code with a table with href byte me as


.sheet div:hover { border:4px solid #232300;background-color:#CCCCCC}
td.withLink {
height: 20px;
margin: 0px;
padding: 0px;
width: 100px;
}
td.withLink a {
display: block;
height: 20px;
width: 100px;
}

td.withLink a:hover {
background: red;
}

<table cellpadding="0" cellspacing="0">

<tr>

<td class="withLink"><a href="#">Bite me</a></td>


</tr>

</table>

Posted by: santosh dahale at June 12, 2004 03:10 AM