This is my table.

<?php 

while(($result = mysqli_fetch_assoc($query))){
echo  '<tr>';
echo '<td>';
echo $result['serial'];
echo '</td>';
echo '<td>';
echo $result['address'];
echo '</td>';
echo '<td>';
echo '<a href="profile-display.php?name='.$result['name'].'">'.$result['name'].'</a>' ;
echo '</td>';
echo '<td>';
echo $result['postal'];
echo '</td>';
echo '<td>';
echo $result['website'];
echo '</td>';
echo '</tr>';
}

?>

Now I want that if a user moves his mouse over one row, the color should change.

This is my table.

<?php 

while(($result = mysqli_fetch_assoc($query))){
echo  '<tr>';
echo '<td>';
echo $result['serial'];
echo '</td>';
echo '<td>';
echo $result['address'];
echo '</td>';
echo '<td>';
echo '<a href="profile-display.php?name='.$result['name'].'">'.$result['name'].'</a>' ;
echo '</td>';
echo '<td>';
echo $result['postal'];
echo '</td>';
echo '<td>';
echo $result['website'];
echo '</td>';
echo '</tr>';
}

?>

Now I want that if a user moves his mouse over one row, the color should change.

• php
• javascript
• onmouseover

Share Improve this question Follow asked Jan 8, 2011 at 22:19 sarthaksarthak 29711 gold badge88 silver badges1616 bronze badges 2

• What have you tried so far? Btw. the code would be much more readable and maintainable if you embed PHP into HTML and not vice versa. – Felix Kling Commented Jan 8, 2011 at 22:22
• Don't echo html, use a templating engine or just use <?=var?>. Your code is very hard to understand. – the_drow Commented Jan 8, 2011 at 22:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

If you don't need to support IE 6, add this to your CSS:

table tr:hover {
    background:orange;
}

Make your <tr> tags <tr onMouseOver="this.bgColor='#EABF4E';">, or use table tr:hover in CSS.

I am a bit of a noob, but I think you need to give the table row a class, then give that class a hover property in your css file.

Add a class to your table row like so:

echo  '<tr class="highlighter">';

You can name it anything, just make sure you use the same name in your css file.

Now, style the class so that it's color changes when a user's mouse hovers over it:

.highlighter:hover {
    background: #ffff99;
 }