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/