CODEWITHSUNDEEP
htmlmouseover
Sam Williams
Sam Williams

Reputation: 177

change font color on mouse over

I have a table which shows the results of my MYSQL Query. To this table I have added row highlighting as you can see in the code below this works perfectly well. However what I am trying to do is also change the color of the font as the row is highlighted, but not with much success. Any suggestions would be appreciated.

 <tr class="active" bgcolor="#222222" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#222222';" onMouseOver="Color='gold';">                  
            <td height="40" align="left" class="nrmgrid4" onMouseOver="Color='red';" ><div id="master_row"><?php echo "$timedate"; ?></div></td>
            <td align="left" class="nrmgrid4" onMouseOver="Color='red';"><div align="left"><?php echo "<a href=\"visitor-detailpage.php?id={$id}\">$company_name</a>";?></div></td>
            <td align="center" class="nrmgrid4" onMouseOver="Color='red';" ><?php echo "$region_name"; ?></td>
            <td align="center" class="nrmgrid4" onMouseOver="Color='red';" ><?php echo "$page_views"; ?></td>
            <td align="center" class="nrmgrid4" onMouseOver="Color='red';"><?php echo "$referrer"; ?></td>
            <td align="center" class="nrmgrid4" onMouseOver="Color='red';"><?php echo "$search_term"; ?></td>
            <td align="center" class="nrmgrid4" onMouseOver="Color='red';">&nbsp;</td>
            <td align="center" class="nrmgrid4" onMouseOver="Color='red';"><?php echo "<a href=\"editVisitorList.php?id={$id}\">Edit</a>";?></td>
          </tr>

Upvotes: 0

Views: 16643

Answers (3)

Majid
Majid

Reputation: 14243

For changing color of hover row,you can use this: 

tr:hover
{
   color:blue;
}

Upvotes: 0

Aldi Unanto
Aldi Unanto

Reputation: 3682

Change this line :

<tr class="active" bgcolor="#222222" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#222222';" onMouseOver="Color='gold';">

To :

<tr class="active">

And you must write CSS :

tr.active{ background-color: #222222; }
tr.active:hover{
   background-color: gold;
   color: gold;
}

Upvotes: 1

Prashant Sharma
Prashant Sharma

Reputation: 343

tr.active:hover{
color:gold;

}

and you can get your desired result with CSS if you use class or ID wisely.

Upvotes: 0

Related Questions