25

当鼠标悬停在html 表格列上时，如何更改其背景列？

最好只使用 css。

4

8 回答 8

51

这可以使用没有 Javascript 的 CSS 来完成。

我使用::after伪元素来突出显示。如果您需要处理点击事件，请在z-index下方突出显示。<tds>使用巨大的高度可以让它覆盖整个柱子。overflow: hidden上<table>隐藏高光溢出。

演示：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>
于 2012-06-24T09:25:33.550 回答
18

我有一个更简单的解决方案（现场示例：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/

于 2012-08-06T12:49:34.670 回答
7

仅适用于单元格或行，抱歉。例如

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 */
于 2009-10-12T09:32:41.517 回答
6

只是为了扩展 Muhammads 的答案（https://stackoverflow.com/a/11828637/1316280），如果您只想在实际表中突出显示 cols，请将 jquery-code-part 更改为：this jsfiddle is specific for only实际表

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/

于 2013-09-19T12:30:18.953 回答
2

我有一个类似的问题，我有太多的列无法在屏幕上显示。通过 PHP，我将每一行变成了一个 1 x 列表。因此，n 行 = n 表。然后我将每个表嵌套在一个主表中。这样做让我可以从我的样式表中调用 td:hover。由于每个 td 都有一个表格，所以当我将鼠标悬停在它上面时，它具有突出显示 a 列的相同效果。

于 2010-03-25T15:10:09.557 回答
1

我认为没有一种干净的 HTML + CSS 方法可以做到这一点。Javascript 是一种替代方法，例如jQuery tableHover 插件

于 2009-10-12T09:32:30.810 回答
-2

您可以尝试使用<col>标签和col:hover { background: red; }样式进行试验，但我怀疑它会起作用。无论如何，这绝对不会在旧版本的 MSIE 中工作，因此您需要 javascript 才能做到这一点。

于 2009-10-12T09:32:56.300 回答
-5

您可以使用纯 CSS 突出显示整行：

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

使用这种方法不可能为列实现这种效果，因为单元格 (td) 是行 (tr) 的子项，而不是列。

要使其在 IE7+ 中工作，请确保添加 doctype 声明（无论如何您都应该这样做:)）。

于 2012-06-20T10:58:00.930 回答