I'm sure this is possible with CSS, but how?

[Monkeyboy]

I'm capable of doing simple text rollovers in CSS. But I've seen sites where the background colour of the table cell seems to change colour as well, when rolled over.

I'm pretty sure this can be done with CSS. How's it done?

[isotope235]

Try this:

<td onmouseover="style.background='newcolor';" onmouseout="style.background='originalcolor';">

[lynlimz]

Same as how you get your hover in links.

with some tricks involved, you can do that. though it works only in opera, IE and mozilla browsers.

using text links,
- set wdth and height
- set background colour
- set a:hover with the same properties above.

check out my 2 sites below for an example.

[Monkeyboy]

Thanks for the help!

[johntabita]

Is it possible to define this as a class? I tried this, but it doesn't work.

.hlcell { onmouseover="style.background='yellow';" onmouseout="style.background='#FFFFFF';" }

Thanks.

[lynlimz]

?

a { border : 1px solid #000000; }
a:hover { background-color : #000000; color : #FFFFFF; }
a:link { backgorund-color : #FFFFFF; color : #000000; }

<a href="test.htm"> Move your Mouse over Me </a>

try the above code.

[isotope235]

jt,

The mouseover needs to be in your html (td, div etc.).

There must be a way to change the class using script, but I don't know that one. Perhaps someone else can help?

If your using an <a> to trigger the rollover, LL's example is your best bet. If you have an <a> nested in a <td> be sure to set the width & height of the <a> to fill the cell (e.g. 100%) also set the <td> padding to 0px.

If you want to change the <td> prop's (e.g. border-style) or aren't using an <a> in the rollover, then you'll need to use the script method:

<td onmouseover="style.borderStyle='inset';" onmouseout="style.borderStyle='outset';">Queequeg</td>

Does that make sense or am I talking from my ****?

[johntabita]

Yep. Thanks!

[isotope235]

Can't claim credit for this one, many thanks to St0rm @ CHP for the help!

To change the class onmouseover:

<td class="yourclass" onMouseOver="this.className='yourotherclass';" onMouseOut="this.className='yourclass';"> </td>

& now for something completely different:

I enjoy the sitepoint boards, but my load times are agonizingly slow, in the neighborhood of a minute per page...ugh!

[Anarchos]

Here's a way to do it in Netscape also:
<ilayer><layer onmouseover="this.bgColor='#ff9900' onmouseout="this.bgColor='#ffffff'">blah</layer></ilayer>

cool, eh?

[lynlimz]

Originally posted by Anarchos
Here's a way to do it in Netscape also:
<ilayer><layer onmouseover="this.bgColor='#ff9900' onmouseout="this.bgColor='#ffffff'">blah</layer></ilayer>

cool, eh?

wow! this is cool!