What am I doing wrong here ??? Why when I load this page the cell with class=".classSelected" is not selected ??? I know this is a very easy problem but i can't find why it is doing it.
<html>
<HEAD>
<title>TEST</title>
<STYLE>
.classNormal
{
color: black;
background-color : yellow;
}
.classSelected
{
color: white;
background-color : red;
}
</STYLE>
</HEAD>
<BODY>
<br><br><br><br><br>
<center>
<table width="10%" BORDER='1' cellspacing='0' cellpadding='6'>
<tr>
<td class=".classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
NORMAL
</td>
<td class=".classSelected" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
SELECTED
</td>
</tr>
<tr>
<td class=".classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
XYZ
</td>
<td class=".classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
2
</td>
</tr>
</table>
</center>
</body>
</html>
<html>
<HEAD>
<title>TEST</title>
<STYLE>
.classNormal
{
color: black;
background-color : yellow;
}
.classSelected
{
color: white;
background-color : red;
}
</STYLE>
</HEAD>
<BODY>
<br><br><br><br><br>
<center>
<table width="10%" BORDER='1' cellspacing='0' cellpadding='6'>
<tr>
<td class=".classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
NORMAL
</td>
<td class=".classSelected" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
SELECTED
</td>
</tr>
<tr>
<td class=".classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
XYZ
</td>
<td class=".classNormal" onmouseover="this.className = 'classSelected'" onmouseout="this.className = 'classNormal'" onMouseMove="this.className = 'classSelected'">
2
</td>
</tr>
</table>
</center>
</body>
</html>