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

===============>>#1 票数:4 已采纳

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

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

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

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

===============>>#2 票数: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; ?>

  ask by Andreas3204 translate from so

未解决问题?本站智能推荐: