title: :hover and TD borders
body: <p>I got a table with some top and bottom borders.. But the :hover class doesn't work as I want it to..</p>
  
  <p>In some cases I got an extra class on the TD's and when the mouse is moved over only the bottom border changes</p>
  
  <p>I have made a jsfiddle here to demonstrate:</p>
  
  <pre><code>td {
      border:1px solid #99bfe3;
      border-left:0px;
      border-right:0px;
      padding:5px;
      vertical-align:top;
  }
  
  tr:hover &gt; td {
      background:#cae5fd;
      border:1px #375877 solid;
      border-left:0px;
      border-right:0px;
  }
  
  td.test {
      background:#9deea4;
      border:1px #51a357 solid;
      border-left:0px;
      border-right:0px;
  }
  
  tr:hover &gt; td.test {
      background:#7fda86;
      border:1px #265c2b solid;
      border-left:0px;
      border-right:0px;
  }
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;cell&lt;/td&gt;
          &lt;td&gt;cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="test"&gt;cell&lt;/td&gt;
          &lt;td&gt;cell&lt;br&gt;hmm&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="test"&gt;cell&lt;/td&gt;
          &lt;td class="test"&gt;cell&lt;br&gt;hmm&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;cell&lt;/td&gt;
          &lt;td&gt;cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;cell&lt;/td&gt;
          &lt;td&gt;cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;cell&lt;/td&gt;
          &lt;td&gt;cell&lt;br&gt;hmm&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/VRv3f/" rel="nofollow">http://jsfiddle.net/VRv3f/</a></p>
  
  <p>How can you make both the top and bottom borders to react on :hover?</p>