在CSS上以高亮显示跳过悬停的其他所有单元

Question

我有以下代码，显示一个html单词表及其来自PHP关联数组的计数。 一个表最多可以有10列乘10行（它是变量）：

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

CSS会在悬停时突出显示并强调单个<td>单元格。 但是，我需要将鼠标悬停/突出显示/下划线仅用于带单词的<td>单元格，而不是数字。 单词将始终在奇数列中，而数字将始终在偶数列中。

您能建议执行此操作的代码吗？ 我已经读到由于与悬停相关的浏览器问题，可能需要在jQuery中执行此操作。 到目前为止，这就是我所拥有的。 先感谢您。 :)

?>
<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

您不需要jQuery，只需使用CSS。

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

在大多数浏览器中都能可靠运行： http : //caniuse.com/css-sel3
演示： http ： //jsfiddle.net/PV6jV/

另外，我注意到您要添加nth-child(2n-1)作为类- :nth-child是伪类，因此您不必实际添加它。

Answer 2

显式更好

<? foreach ($rows as $cols): ?>
  <tr>
       <td> <?php echo $cols[0]; ?></td>
       <td class="highlight"> <?php echo $cols[1]; ?></td>
       <td> <?php echo $cols[0]; ?></td>
       <td class="highlight"> <?php echo $cols[3]; ?></td>
   </tr>
<?php endforeach; ?>