CodePen

HTML

            
              <table>
  <tr>
    <td>Label 1</td>
    <td>Content 1</td>
    <td>Label 2</td>
    <td>Content 2</td>
  </tr>
  <tr>
    <td>Label 3</td>
    <td>Content 3</td>
    <td>Label 4</td>
    <td>Content 4</td>
  </tr>
</table>
            
          
!

CSS

            
              html {
  font: 300 100%/1.5 Ubuntu;
  color: #333;
}

table {
  width: 30em;
  margin: 3em auto;
}
td {
  padding: 0.25em 1em;
}
td.hover {
  background: #a7cd80;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var hoverClass = 'hover';
$('td').hover(function() {
  var $this = $(this);
  $this.addClass(hoverClass);
  if ($(this).index() % 2) {
    $this.prev().addClass(hoverClass);
  } else {
    $this.next().addClass(hoverClass);
  }
}, function() {
  var $this = $(this);
  $this.removeClass(hoverClass);
  if ($(this).index() % 2) {
    $this.prev().removeClass(hoverClass);
  } else {
    $this.next().removeClass(hoverClass);
  }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................