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

我有以下代码，显示一个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;
}

最佳答案

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

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

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

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

关于php - 在CSS上以高亮显示跳过悬停的其他所有单元格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16027240/