使用CSS中的突出显示，在悬停时跳过其他每个单元格

Question

I have the following code that displays an html table of words and their counts from a PHP associative array. A table can have up to 10 columns by 10 rows (it's variable):

| col1  | col2 | col3  | col4 |
|-------|------|-------|------|
| word1 |  50  | word4 |  25  |
| word2 |  44  | word5 |  21  |
| word3 |  39  | word6 |  16  |, etc.

The CSS highlights and underscores individual <td> cells on hover. However, I need the hover/highlight/underscore to work ONLY on the <td> cells with words--not on the numbers. The words will always be in odd-numbered columns--and numbers will always be in even-numbered columns.

Can you please suggest the code that will do that? I've read that I might need to do this in jQuery because of browser issues related to hover. Here's what I have so far. Thank you in advance. :)

?>
<table id="word-table">
<?echo "<th>Word Counts</th>";?>
  <tbody>
    <?
      foreach ($rows as $cols) {
        echo '<tr><td>' . implode('</td><td class="nth-child(2n-1)">', $cols) . '</td></tr>';
      }
    ?>
  </tbody>
</table>
<?

#word-table td:nth-child(2n-1) {
    background: #CCFFCC;
}

#word-table td:nth-child(2n) {
    display: block;
    background: #CCE0FF;
    margin-right: 7px;
    text-align: center;
}

#word-table tbody td:hover 
{
    cursor: hand;
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    background: #FFFFCC;
}

Answer 1

You don't need jQuery for this, you can just use CSS.

td:nth-child(odd):hover{
  ...
}

Works reliably in most browsers: http://caniuse.com/css-sel3
Demo: http://jsfiddle.net/PV6jV/

Also, I notice you're adding nth-child(2n-1) as a class - :nth-child is a pseudo class, so you don't have to actually add it.