html:悬停表列

Question

如何在鼠标悬停时更改html表列的背景列？

最好只用css.

Answer 1

这可以使用没有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>

Answer 2

我有一个更简单的解决方案(实例: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 3

抱歉,只适用于单元格或行.例如

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 4

只是为了扩展穆罕默德的答案（/sf/answers/828004621/），如果您只想突出显示实际表中的列，请将 jquery-code-part 更改为：此 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/