?
Solved

table row onmouseover to change background color

Posted on 2007-09-30
2
Medium Priority
?
6,352 Views
Last Modified: 2010-08-05
I hava a table that has a onmouseover and onmouseout on the tr.  If the rows dont have a color then the onmouseover and onmouseout will change color when i scroll the mouse over a tabel row.  But if the table row has been defined a color in the beginning then the color will not change at all.
I know you can change it using css, but i really need to use style method b/c i'm making a dynamic control and the color is fixed.
I dont understand why it works when i dont define a backgorundcolor in the td tags but fails when their is one.

      <table>
          <tbody>
              <tr >
                  <th style="font-family: fixed,helvetica,courier,system,times; background-color: rgb(245, 245, 220);
                      color: rgb(0, 0, 0); font-weight: normal; text-align: center; width: 80px;">
                      Grid ID</th>
                  <th style="font-family: fixed,helvetica,courier,system,times; background-color: rgb(245, 245, 220);
                      color: rgb(0, 0, 0); font-weight: normal; text-align: right; display: none; width: 115px;">
                      Title</th>
                  <th style="font-family: fixed,helvetica,courier,system,times; background-color: rgb(245, 245, 220);
                      color: rgb(0, 0, 0); font-weight: normal; text-align: left; width: 300px;">
                      Description</th>
              </tr>
              <tr onmouseover="this.style.backgroundColor='#dddddd'; this.style.cursor='pointer';"
               onmouseout="this.style.backgroundColor='#ffffff'; this.style.cursor='default';" >
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(220, 220, 220);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: center;
                      width: 80px; font-weight: normal;">
                      0750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(220, 220, 220);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: right;
                      display: none; width: 115px; font-weight: normal;">
                      Title Name 0750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(220, 220, 220);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: left;
                      width: 300px; font-weight: normal;">
                      Description 0750</td>
              </tr>
              <tr onmouseover="this.style.backgroundColor='#dddddd'; this.style.cursor='pointer';"
               onmouseout="this.style.backgroundColor='#ffffff'; this.style.cursor='default';" >
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(238, 238, 238);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: center;
                      width: 80px; font-weight: normal;">
                      1750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(238, 238, 238);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: right;
                      display: none; width: 115px; font-weight: normal;">
                      Title Name 1750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(238, 238, 238);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: left;
                      width: 300px; font-weight: normal;">
                      Description 1750</td>
              </tr>
...
0
Comment
Question by:borg48
2 Comments
 
LVL 28

Accepted Solution

by:
TName earned 200 total points
ID: 19988010
Because you're assigning the background color to the *row*, and the cells are "on top" of the row. If the cells have a bg color assigned, you can't see the row's color... You could change the coor of the TDs instead - of one td
  <td onmouseover="this.style.backgroundColor='#f00';...
or even the color of all cells of a row, depending on your intentions.
0
 

Author Comment

by:borg48
ID: 19988198
Thank you for explaining it
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question