Question

我有以下代码，它显示了PHP关联数组中的单词及其计数的html表。一个表最多可以有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; ?>

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

2 个答案: