Problem change class onmouseover ...

[southbeach]

I cannot see what I am doing wrong here ... Can you spot it?

<tr class="datarow" onmouseover="this.style.className='datarowhover';" onmouseout="this.style.className='datarow';" style="background-color: #FFF" id="row1">
<td>John</td>
<td>Doe</td>
<td>(000) 111-2222</td>
</tr>

The CSS looks like this

.datarowhover
{
	color: #CCFFCC;
	background: <?php echo ALTROWHOVER; ?>;
	cursor: pointer;
}
.datarow
{
	color: #000;
	background: <?php echo ALTROWHOVER; ?>;
	cursor: default;
}

I am trying to change background color on a row as mouse hovers over it and change it back to its default when mouse moves out ...

Thank you all for your assistance!



--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[feherke]

Hi

<tr class="datarow" onmouseover="this[s][red].style[/red][/s].className='datarowhover';" onmouseout="this[s][red].style[/red][/s].className='datarow';" style="background-color: #FFF" id="row1">

Feherke.

http://rootshell.be/~feherke/

 

[vacunita]

Is there some reason other than IE6's inability to understand it in anything other than a link that you are not using the CSS hover pseudo class?

.classname{
...

}


.classname:hover{
...
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[southbeach]

vacunita, I am writing a PHP script that will display generic data grid. Part of the PHP script allows the user to setup alternating background color per row (hence: css code for datarow0 and datarow1 below). I had the code you suggested but it did not work and so I decided to go with onmouseover and onmouseout ...

feherke, your suggestion helped but I found that using style="..." within the <tr ...> tag caused the problem. So, I solved it by making following changes:

.datarowhover
{
	color: #000;
	background: #CCFFCC;
	cursor: pointer;
}
.datarow0
{
	color: #000;
	background: #FFF;
	cursor: default;
}
.datarow1
{
	color: #000;
	background: #CCC;
	cursor: default;
}

and the HTML looks like this:

<tr class="datarow0" onmouseover="this.className='datarowhover';" onmouseout="this.className='datarow0';">
<td>John</td>
<td>Doe</td>
<td>(000) 111-2222</td>
<td><img src="images/trash.gif" alt="" /></td>
</tr>

Thank you both for your time and assistance!


--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.