跳過懸停的每一個其他單元格與高亮顯示在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

回答

相關問題