onmouseover with <tbody> problem

[galaxy99]

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]

<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]

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]

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]

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]

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]

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!