onmouseover and out css

[swaxmot]

Hi,

is there any way to put this:

<td onmouseover="style.backgroundColor='#cccccc';" onmouseout="style.backgroundColor=''">

into a css tag or something so that i only have to type like <td class='maincolumn'> or something like it.

Thanks in avance.

[iLaunch]

Yes. You should look into :hover. Essentially what you want to do is have a base style of:

#maincolumn {
    background: #FFFFFF;
}

#maincolumn:hover {
    background: #CCCCCC;
} 

That should do it for you.

[swaxmot]

Tyvm, this works excellent.

EDIT: No, checked again, it doesn't work .
Still thank you for your effort.

[iLaunch]

Hmm. What issue are you having? Does the initial color set to FFFFFF but never change on mouseover?

[swaxmot]

Originally Posted by iLaunch

Hmm. What issue are you having? Does the initial color set to FFFFFF but never change on mouseover?

It doesn't do either of them.

[iLaunch]

Oh whoops. I didn't notice you were using class. Try this instead:

.maincolumn {
    background: #FFFFFF;
}

.maincolumn:hover {
    background: #CCCCCC;
}

[swaxmot]

It works now, except for the hover .

[iLaunch]

What browser/version are you using to test this?

[swaxmot]

IE7 and frontpage browser

[iLaunch]

Alright so I realize i was just being dumb, heh. Try this instead:

.maincolumn {
    border: 0px;
    background: #FF0000;
}

.maincolumn div {
    width: 100%;
    height: 100%;
}

.maincolumn div:hover {
    background: #CCCCCC;
}

And then instead of using:

<td class='maincolumn'> whatever </td>

use

<td class="maincolumn"><div> whatever </div></td>