...

View Full Version : changing bacground-color with onMouseOver/Out in css?



Speedy
06-02-2003, 05:58 PM
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
06-02-2003, 06:12 PM
Oops!...

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

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

/Speedy

beetle
06-02-2003, 06:29 PM
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
06-02-2003, 07:21 PM
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
06-02-2003, 09:39 PM
Thanks beetle and Garadon,

Now it works :)

/Speedy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum