html：懸停表列

Question

當鼠標懸停時，如何更改html表的背景列列？

最好只用css。

Answer 1

只適用於單元格或行，對不起。 例如

td { 
    background-color: blue; 
} 

td:hover { 
    background-color: red; 
} 

有JavaScript解決方案可用，但現在沒有任何CSS可以做你想做的事情，因爲選擇器的限制。

td /* all cells */ 
{ 
    background-color: blue; 
} 

tr /* all rows */ 
{ 
    background-color: pink; 
} 

/* nothing for all columns */ 

Answer 2

我不認爲有一個乾淨的HTML + CSS方式來做到這一點。 Javascript是一種替代方案，例如jQuery tableHover plugin

Answer 3

你可以嘗試用<col>標籤和col:hover { background: red; }風格嘗試，但我懷疑這會工作。無論如何，這絕對不適用於老版本的MSIE，所以你需要javascript才能做到這一點。

Answer 4

我有一個類似的問題，我有太多的列在屏幕上顯示。通過VIA PHP，我將每行轉換爲1 x列表。所以，n行= n表。然後，我嵌套在主表中的每個表。這樣做可以讓我從樣式表中調用td：hover。由於每個td都擁有一個表格，所以當我將鼠標懸停在列上時，它具有突出顯示列的相同效果。

Answer 5

可以使用高亮全行純CSS：

tr td {background-color: red;} 
tr:hover td {background-color: blue;} 

實現了一列這種效果是不可能用這種方法，因爲細胞（TD）是行（TR）的孩子，不一列。

要使其在IE7 +中工作，請確保添加doctype聲明（無論如何，你應該始終做:)）。

Answer 6

這可以使用沒有Javascript的CSS來完成。我使用::after僞元素來做突出顯示。如果您需要處理點擊事件，z-index會將突出顯示保留在<tds>以下。使用巨大的高度可以覆蓋整個色譜柱。 <table>上的overflow: hidden隱藏突出顯示溢出。

演示：http://jsfiddle.net/ThinkingStiff/2XeYe/

輸出：

CSS：

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
    overflow: hidden; 
    z-index: 1; 
} 

td, th { 
    cursor: pointer; 
    padding: 10px; 
    position: relative; 
} 

td:hover::after { 
    background-color: #ffa; 
    content: '\00a0'; 
    height: 10000px;  
    left: 0; 
    position: absolute; 
    top: -5000px; 
    width: 100%; 
    z-index: -1;   
} 

HTML：

<table> 
    <tr> 
     <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th> 
    </tr> 
    <tr> 
     <th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> 
    </tr> 
    <tr> 
     <th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> 
    </tr> 
    <tr> 
     <th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> 
    </tr> 
    <tr> 
     <th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> 
    </tr> 
</table> 

Answer 7

我甲肝Ë更簡單的解決方案（直播例如：http://jsfiddle.net/q3HHt/1/）

HTML：

<table> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

CSS：

table, td { 
    border: 1px solid black; 
} 

td { 
    width: 40px; 
    height: 40px; 
} 

.highlighted { 
    background-color: #348A75; 
} 

的jQuery：

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

活生生的例子：http://jsfiddle.net/q3HHt/1/

Answer 8

只是爲了擴展穆罕默德答案（https://stackoverflow.com/a/11828637/1316280），如果你想突出的cols只有在實際的表，jQuery的代碼部分更改爲： 此的jsfiddle是具體的只是實際表

jQuery的

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

的jsfiddle：http://jsfiddle.net/q3HHt/123/