changing bacground-color with onMouseOver/Out in css?

[Speedy]

Hi,

I want a whole line in a table to change background-color
when moving the mouse over a cell in that line.

right now I use this code:


<tr id="index" style="background-color:#FFFFFF;" onMouseOver="this.style.background='#CCCCCC';" onMouseOut="this.style.background='#FFFFFF';">


and it works just fine but now I want it in an .css file that I
include in my page but I can't get it to work.

I tried this:


TR.index
{
background-color: #FFFFFF;
}
TR.index.onMouseOver
{
background-color: #CCCCCC;
}


I also tried with TR.index.hover instead of onMouseOver
but that didn't work either.

Anyone that has a clue what to do?

Thanks in advance
/Speedy

[Speedy]

Oops!...

...I didn't see the HTML & CSS forum.

nevermind this question I'll post it in there instead
sorry.

/Speedy

[beetle]

Actually - I'll answer for you here because there's no direct CSS answer. Mozilla supports the :hover pseudo-class on arbitrary elements, whereas IE only supports it for anchor tags. So, what to do? I think the best solution is a transparent one. Let Mozilla use the :hover, and provide a DHTML behavior for IE

First, the CSS

TR.index
{
background-color: #FFFFFF;
behavior: url(/js/tr.index.htc);
}
TR.index:hover
{
background-color: #CCCCCC;
}
Then, tr.index.htc

<public:component>
<public:attach event="onmouseover" onevent="overHandler()" />
<public:attach event="onmouseout" onevent="outHandler()" />

<script language="JScript">
function overHandler()
{
element.runtimeStyle.backgroundColor = '#CCCCCC';
}
function outHandler()
{
element.runtimeStyle.backgroundColor = '';
}
</script>
</public:component>
That should do it :D

[Garadon]

Here is my suggestion


table rows look like this:


<tr class="tr1" onMouseOver="this.className='tr';" onMouseOut="this.className='tr1';">



put this in your style sheet.

.TR
{
background-color: #FFFFFF;
behavior: url(/js/tr.index.htc);
}
.TR1
{
background-color: #CCCCCC;
}

[Speedy]

Thanks beetle and Garadon,

Now it works :)

/Speedy