Highlight TD cells

Hey,
how do I set a a link in TD cells so when people move their mouse over the cell the cell colour changes…sort of like here (the navigation on da left)
http://www.bruderhof.com/us/index.htm
This can be done with CSS right?

Yes it can. :slight_smile: I just did this on a project I’m working to make a nice effect for the main menu. What I did was something like this:
CSS:

td.menu {
background-color:white;
}
td.menu:hover {
background-color:yellow;
}

Then, for the cells I wanted to highligh, I used class=“menu”

Give that a try. Though, I think IE might have issues with it (at least in my working example). Let me know how it works out. :slight_smile:

Hey thanks for the fast response…the td.menu background-color:white works, but in the hover state…it doesnt work…it’s not changing color!

No problem. :slight_smile:

Humor me and test it in a different, better browser such as Mozilla or Opera. If it works in them you’ll help me confirm why my working example for the project I’m working on is having problems in IE.

no Mozilla, no Opera…maybe we can get someone to show us what’s up

hey take a look here…i did a search and saw this, maybe it could help
http://lists.evolt.org/archive/Week-of-Mon-20011015/059460.html

I’ll be back in a couple of hours…to read it fully…just thought u might wanna see that too

I have links in my table cells, and it works beautifully in Opera and Mozilla. Could you post your table and CSS code, please?

This works in IE:
http://menwiz.netfirms.com/text.htm
(look at the source code)

Thanks dotcomguy and Starrwriter for helping out.
Starrrwriter I tried your code and everything is working fine now…much appreciated!

Yeah, but CSS is so much nicer than Javascript to use for this, don’t you think? :wink:

Does your table cell contain only a link, like http://msdn.microsoft.com/? If so, then this solution works for every browser written in the last 3-4 years:

CSS:


td a {
  background-color: white;
  color: black;
  /*this will make the link take up the whole table cell's width/height*/
  display: block;
}
td a:hover {
  background-color; black;
  color: white;
}

HTML:


<td><a href="/home.php">Home</a></td>

You should then get the effect you want. The reason that dotcomguy’s code doesn’t work in IE is because IE/Windows only understands :hover for <a> tags, and for nothing else. According to the CSS2 spec, :hover should be supported on any visible elements, but MS hasn’t put that into IE/Windows yet.:frowning:

Thanks for confirming that. I hate running into these types of things with IE all the time. It’s such a pain and a waste of time to find a workaround. :frowning:

Maybe I’ll give your other suggestion a try, thanks.

Vinnie,

Is there anyway to do this if the cell/div contains other info besides just an anchor tag? I tried using it and it’s only highlighting the line that the link is on and not the entire div area.

If you don’t mind it not working in IE for Windows, then :hover can be applied to any visible element, not just links. However, IE/Win only understands :hover on the <a> tag, so if you want the whole cell/div highlighted AND you want it to work in IE/Win, then you’ll have to use Javascript :(.

I think you could make it work if you use the <a>tag and put in the td link pseudo class:

display:block;
width:100%;

example I did: http://www.ict-id.nl/studiekring/www/html/plannerstaff.html

(table in right-middle, the one with the zero’s)


table#rooster td a:link, 
table#rooster td a:visited {
color: black; /*#A60203 #E9E6D7 */
padding:0px;
margin:0px;
background: #D9D6C9 url(../images/bg/bg_rooster_vrij.gif) no-repeat center center !important;
display:block;
width:100%; 
}

table#rooster td a:hover, 
table#rooster td a:active {
color: white;
text-decoration: none;
background: #D9D6C9 url(../images/bg/bg_rooster_active.gif) no-repeat center center !important;
width:100%;
}

this is a non elegant way to do this

<html>
<head>
<title>Untitled</title>
<style>
.on{
background-color: #F0E68C;
}

.off{
background-color: white;
}

&lt;/style&gt;

</head>

<body>
<table>
<tr>
<td onmouseover=“this.className=‘on’” onmouseout=“this.className=‘off’”>1111</td>
<td onmouseover=“this.className=‘on’” onmouseout=“this.className=‘off’”>2222</td>
</tr>
<tr onmouseover=“this.className=‘on’” onmouseout=“this.className=‘off’”>
<td>3333</td>
<td>4444</td>
</tr>
<tr>
<td onmouseover=“this.className=‘on’” onmouseout=“this.className=‘off’”>55555</td>
<td onmouseover=“this.className=‘on’” onmouseout=“this.className=‘off’”>55555</td>
</tr>
</table>
</body>
</html>

this code work in IE and netscape 6.X

I hope can help yuo

or you can just put the onmouseover state in the td…

<td onMouseOver=“bgColor=‘#000066’” style=“cursor:hand” onMouseOut=“bgColor=‘#000000’” bgcolor=“#000000” …>