title: Hover <a> in <td> change <td> background image
body: <p>I want to change the background of the <code>&lt;TD&gt;</code> when the user hovers a link <code>&lt;a&gt;</code> in the <code>&lt;td&gt;</code></p>
  
  <p>Part of my HTML:</p>
  
  <pre><code>&lt;tr class="menuBarBottomSelected"&gt;
  &lt;td width="20%"&gt;
  &lt;a class="menuBarBottomUnselected" href="./url.php"&gt;Getting&amp;nbsp;Started&lt;/a&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This is my css:</p>
  
  <pre><code>.menuBarBottomSelected{
      background-image: url('/auth/radius/submenu_bg.jpg');
      background-repeat: repeat-x;
      font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
      color : #ffffff;
      border-top:#666666 solid 1px;
  }
  
  tr.menuBarBottomUnselected td a:hover{
      color:black;    
      background-image: url('/auth/radius/submenu_bg_hover.jpg');
      background-repeat: repeat-x;}
  </code></pre>
  
  <p>The html is being generated so I am not sure why they would use the same class for the link and the td. I was able to assign a :hover on the link but only the background of the text changed not the whole <code>&lt;td&gt;</code></p>