I am looking to make the table cells change background color when the mouse hovers over them.
Below are the styles defined:
.cells{
border-style:inset;
border-width:1px;
border-color:#06F;
background-color:#D6D6D6;
font-style: italic;
}
.cells td:hover{
background-color: #FF0000;
Here is how the table is created:
<table class="table">
<tr>
<td></td>
<th colspan="5" class="specialCell">Cost Per Person</td>
</tr>
<tr>
<th class="specialCell">Party Size</th>
<th class="headers"><?php echo $titles[0] ?></th>
<th class="headers"><?php echo $titles[1] ?></th>
<th class="headers"><?php echo $titles[2] ?></th>
<th class="headers"><?php echo $titles[3] ?></th>
<th class="headers"><?php echo $titles[4] ?></th>
</tr>
<?php
for ($y=0; $y<$rows_needed; $y++){
echo '<tr>';
echo '<th class="headers">'.$column1[$y].'</th>';
for ($i=0; $i<5; $i++){
$newValue = $column1[$y] * $titles[$i];
echo '<td class="cells">'.$newValue.'</td>'; //THIS IS WHERE THE CLASS IS CALLED
}
echo '</tr>';
}
?>
</table>
The issue is that the table cell does not change its background color on hover. Any suggestions?