PDA

View Full Version : onmouseover with <tbody> problem



galaxy99
01-02-2010, 02:14 AM
Happy New Year! I am pretty new to html/css/javascripts stuff. Please forgive me if my question is very basic.

I have a table with several tbody tags looks like this

<table>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td colspan="3">
<div>xxx</div>
</td></tr>
</tbody>

<tbody>
.
.
. (same as above)
</tbody>
</table>

The general table and page has a css file associating with it.


I like to achieve the mouseover change bgcolor on each <tbody> area where contains two <tr> tags.

I tried <tbody onMouseOver="this.bgColor='#3d3d3d';" onMouseOut="this.bgColor='#1d2025';">, but it didn't work.

However, when I used <tr onMouseOver="this.bgColor='#3d3d3d';" onMouseOut="this.bgColor='#1d2025';">, it worked on the <tr> line only as expected.

I am confused whether onmouseover works for tbody tag at all. If so, how can I achieve it?

Thank you very much!

jscheuer1
01-02-2010, 05:33 AM
<table>
<tbody
onmouseover="this.style.backgroundColor='#3d3d3d';"
onmouseout="this.style.backgroundColor='#1d2025';">
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td colspan="3">
<div>xxx</div>
</td>
</tr>
</tbody>
</table>

Style properties whenever available should generally be used in events and elsewhere as attributes are being phased out. If the tr's or td's already have background, the tbody's background will not be seen, or perhaps only partially, as most or all of it will be underneath the the tr's/td's.

galaxy99
01-02-2010, 06:53 AM
Thanks, John. I have tried your way, the mouseover effect doesn't show up. As you said, because the entire table has a background, it doesn't reveal. Do you know the other way to get around it, maybe from css side? Thanks.

jscheuer1
01-02-2010, 08:43 AM
Well, I don't want to offer additional solutions to overcome something you have when I don't know exactly what that is. Could you post a link to the page?

Please post a link to the page on your site that contains the problematic code so we can check it out.

galaxy99
01-02-2010, 07:06 PM
Sure. Here is a page. Appreciate your consideration and debugging.

http://lenxphotography.com/tabDebug.html

I used <tr onmouseover=XXX> for first 3 tbody and the 4th one used <tbody onmoseover=XX>. As you can see, tr works but tbody doesn't (be to viewed).

Thank you for your time and help.

jscheuer1
01-02-2010, 10:15 PM
That:


<tbody onMouseOver="this.bgColor='#3d3d3d';" onMouseOut="this.bgColor='#1d2025';">


Is not what I suggested. There could be other problems, but at least try it as I wrote it:


<table>
<tbody
onmouseover="this.style.backgroundColor='#3d3d3d';"
onmouseout="this.style.backgroundColor='#1d2025';">
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td colspan="3">
<div>xxx</div>
</td>
</tr>
</tbody>
</table>

galaxy99
01-02-2010, 10:23 PM
That:


<tbody onMouseOver="this.bgColor='#3d3d3d';" onMouseOut="this.bgColor='#1d2025';">


Is not what I suggested. There could be other problems, but at least try it as I wrote it:


<table>
<tbody
onmouseover="this.style.backgroundColor='#3d3d3d';"
onmouseout="this.style.backgroundColor='#1d2025';">
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td colspan="3">
<div>xxx</div>
</td>
</tr>
</tbody>
</table>
Wow, it works this time. Thank you!