在 CSS 中突出显示悬停时跳过所有其他单元格

Posted 2023-03-06

【中文标题】在 CSS 中突出显示悬停时跳过所有其他单元格

【英文标题】：Skip every other cell on hover with highlight in CSS

【发布时间】：2013-04-08 06:42:12

【问题描述】：

我有以下代码，它显示了一个 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】：

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

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

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

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

【讨论】：

nth-child 不支持 IE8 或更低版本，在大多数情况下，我认为 OP 要求它适用于

@Neverever - 我把链接放到 caniuse.com - 他们可以决定这个答案是否有用并适合他们的目的。我的工作不支持 IE8，Google 也不支持（就他们的应用而言）。

使用nth-of-typecss-tricks.com/the-difference-between-nth-child-and-nth-of-type

@c4p - 虽然这在其他情况下会更好，但您不应该在 <tr> 中包含任何其他子元素（<td> 除外），所以 :nth-child 在这里会很好.

@ahren，这在两秒钟内就起作用了，是的，你是对的，它甚至在没有 'nth-child(2n-1)' 的情况下也能正常工作。感谢小提琴，并链接到“caniuse”，额外的讨论也很有帮助。 :)

【参考方案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 修复。由于表的行数和列数是可变的，我不确定如何为 1 到 10 行和/或列的任何组合实现您的解决方案（例如，我可以有 8 列和 9 行......有没有一种简单的方法可以使用 while 循环和计数器来做到这一点？再次感谢 David。

foreach() 也可以用作 foreach($cols as $column_index, $column)，与 % Modulus 一起使用。您可以通过 $column_index % 2 获得所有偶数列。从那里它只是一个简单的 if() else 。

@Andreas3204 如果您是编程新手，我建议您查看 Codeigniter，它是一个稍旧的 PHP 框架，有一些非常好的文档，并且因为它是一个 MVC（模型视图控制器）系统，它会让您作为应聘者更具吸引力。

谢谢你，@David。我将修改您建议的循环结构。我同意你的观点：我应该从 MVC 框架的角度来思考，就像我在 Codeignitor 上看到的那样。我很确定你猜到我是在“避免”这层额外的复杂性。 :) 再次感谢您的帮助。