Table cell with CSS 1

[Bravogolf]

Hi,
I have a table cell that does the following:

<td onMouseover="this.style.backgroundColor='#CCCCCC';" onMouseout="this.style.backgroundColor='#f7f8fc';">

Basically, it changes the background colour upon mousover (apologies for being patronising).

What I would like it to do is

<td class="mouseovercell">

And in that CSS style, I could have the specified mouseover and mouseout events. Problem is, I dont know how to do this, I can specify the background colours, borders etc. But I cant get it to specify what color to change to when the mouse moves over the table cell (not a link, but the actual table cell).

I apologise in advance if this is a stupid question

 

[ggriffit]

check out the right hand nav bar at

http://www.greggriffiths.org/livelink/

which does this. you should be able to work it out from there, let us know if you need more.

 

[Bravogolf]

Thanks ggriffit, I got the code from that site.
However, is there any way the color (or even better, the mouseover events) can be specified from a CSS file and not a script?

You see, the color of the table cell will vary depending on what style sheet is selected....

 

[Vragabond]

Check my reply in this thread:

http://www.tek-tips.com/viewthread.cfm?SQID=833869&SPID=215&page=1

 

[Bravogolf]

Excellent, thank you very much.

 

[Thought]

Vragabond,

Perchance is that answer elsewhere as well? I'm looking for the answer to this same question, but that link is no longer functional.

Here's hoping!

 

[Bravogolf]

Hey Thought, do you still want the answer?

I used for an old site for a friend, check out the roll over effect 1 and 2 at

http://heaphydesigns.com/menu-rollover-effect2.php

 

[ChrisHunt]

You can do it in pure CSS like this:

.mouseovercell {
   background-color: #f7f8fc;
}

.mouseovercell:hover {
   background-color: #CCCCCC;
}

Unfortunately it only works in Firefox and other modern browsers. To get the same effect in IE, you need to either...
[ul]
[li]Put an <a> element inside the cell with [tt]display:block[/tt] and apply the hover pseudoclass to that instead (I use a similar approach on my website).
[/li]
[li]Use Dean Edwards' IE7 script on your site - you can get it from

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

[/li]
[/ul]

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd