A:Hover Question

programming web dev
1

I’m trying to do this without resorting to javascript. I cannot change the background on an a:hover. What could I be doing wrong?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
    #tbleMenu td div
    {/* */
        width:127px;
        height:18px;
        font-size:11px;
        background-color:#0099CC;
        border:1px #00CCFF solid;
        padding:10px;
        padding-top:5px;
        padding-bottom:14px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:11px;
        
    } 
    
    #tbleMenu a
    {
        text-decoration: none;
        font-weight:bold;
    }
    
    #tbleMenu td a:hover
    {
        /* color:#FFFFFF; */

        background-color:#FFFFFF;
    }
</style>
</head>

<body>
<table id= 'tbleMenu'
        border="0">
        <!-- Menu Content Start -->
  <tr>
    <td><a href=''><div>Connect with your classmates</div></a></td>
    <td><a href=''><div>Connect with your classmates</div></a></td>
    <td><a href=''><div>Connect with your classmates</div></a></td>
  </tr>
  <tr>
    <td><a href=''><div>Connect with your classmates</div></a></td>
    <td><a href=''><div>Connect with your classmates</div></a></td>
    <td><a href=''><div>Connect with your classmates</div></a></td>
  </tr>
          <!-- Menu Content End -->
</table>
</body>
</html>