1

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

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

<td>CSS在悬停时突出显示并强调单个单元格。但是，我需要悬停/突出显示/下划线仅在<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;
}
4

2 回答 2

4

你不需要 jQuery，你可以使用 CSS。

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

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

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

于 2013-04-16T01:22:30.843 回答
1

明确的更好

<? 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; ?>
于 2013-04-16T01:25:19.950 回答