跳过悬停的每一个其他单元格与高亮显示在CSS

我有以下代码，显示一个PHP表单和一个PHP关联数组的计数。一个表可以由10行（这是变量）有多达10列：跳过悬停的每一个其他单元格与高亮显示在CSS

| 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; 
}

来源

2013-04-16 Andreas3204

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

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

可靠地工作在大多数浏览器：http://caniuse.com/css-sel3
演示：http://jsfiddle.net/PV6jV/

另外，我注意到你加入nth-child(2n-1)为一类 - :nth-child是一个伪类，所以你不必实际添加它。

来源

2013-04-16 01:22:30 ahren

'第n-child'没有为IE8或更少的支持，在大多数的情况下，我会假设OP要求它为 Neverever

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

使用'nth-type-type' http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/ – CraigTeegarden

明确更好

<? 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-16 01:25:19 David

大卫，谢谢你的时间和考虑。我喜欢你的想法。但我很新，并且只是在上面发布了两秒钟的css修复。由于表行数和列数是可变的，我不知道如何实现1到10行和/或列的任何组合的解决方案（例如，我可以有8列和9行...是有一个简单的方法可以通过while循环和计数器来实现这一点吗？再次感谢David。 – Andreas3204

foreach（）也可以用作foreach（$ cols as $ column_index，$ column），与％Modulus一起使用。你可以通过做$ column_index％2来获得所有的偶数列。从那里它只是一个简单的if（）{} else {}。 – David

@ Andreas3204如果你是编程新手，我推荐检查Codeigniter，它是一个稍微老一点的PHP框架。有一些非常好的文档，因为它是一个MVC（模型视图控制器）系统，它会使你更有吸引力作为雇用的候选人。 – David

跳过悬停的每一个其他单元格与高亮显示在CSS

回答

相关问题