cols，colgroups和css：hover psuedoclass

我试图创build一个表来显示个人的BMI。

作为其中的一部分，我希望在：hover上为<tr> 和 <col> （或<colgroup> ）突出显示，以使交集更加明显。

由于桌子上会同时具有公制和英制的测量，所以：hover不必停留在单元格（从任何方向），事实上，如果从一个坐标轴延伸到另一个坐标轴，将会是一个奖励。我也使用XHTML 1.1严格DOCTYPE，如果这有所作为？

所以…一个例子（真正的桌子…更大），但这应该是有代表性的：

 <script> tr:hover {background-color: #ffa; } colgroup:hover, col:hover {background-color: #ffa; } </script>

…

 <table> <col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup> <tr> <th></th> <th>50kg</th> <th>55kg</th> <th>60kg</th> </tr> <tr> <td>160cm</td> <td>20</td> <td>21</td> <td>23</td> </tr> <tr> <td>165cm</td> <td>18</td> <td>20</td> <td>22</td> </tr> <tr> <td>170cm</td> <td>17</td> <td>19</td> <td>21</td> </tr> </table>

我问不可能，我需要去JQuery病房吗？

这是一个纯CSS方法，不使用Javascript。

我使用::before和::after伪元素做行和列突出显示。 z-index保持突出显示在<tds>下面，以防需要处理点击事件。 position: absolute允许他们离开<td>的范围。 overflow: hidden在<table>隐藏突出显示溢出。

这是没有必要的，但是我也让它在标题中select行或列。 .row和.col类照顾这个。如果你希望简化，你可以删除它们。

这在所有的现代浏览器中都能正常工作（并且在较旧的浏览器上无所事事地优雅地降级）。

演示： http : //jsfiddle.net/ThinkingStiff/rUhCa/

输出：

在这里输入图像描述

CSS：

 table { border-spacing: 0; border-collapse: collapse; overflow: hidden; z-index: 1; } td, th, .row, .col { cursor: pointer; padding: 10px; position: relative; } td:hover::before, .row:hover::before { background-color: #ffa; content: '\00a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col: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 class="col">50kg</th> <th class="col">55kg</th> <th class="col">60kg</th> <th class="col">65kg</th> <th class="col">70kg</th> </tr> <tr> <th class="row">160cm</th> <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> </tr> <tr> <th class="row">165cm</th> <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> </tr> <tr> <th class="row">170cm</th> <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> </tr> <tr> <th class="row">175cm</th> <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> </tr> </table>

有一个我遇到的非常好的jQuery插件位于这里，这个东西很好的工作与负载的例子。优先使用这个。

在IE中，AFAIK CSS Hovers在TR上不支持，所以最好的TR部分只能在Firefox中工作。

从来没有见过:hover在col / colgroup工作，所以不知道这是可能的…

想想你可能会停留在一个Javascript实现。

这里有一个例子，在Firefox中工作（行和列），但再次在IE浏览器中打破… cols不工作。

我从css-tricks.com中完成了这个简单的工作。我也准备了一个小提琴，但是没有什么奇特的东西，但是你可以用css-trick页面提供的相同的代码来得到它的想法

// Html

 <table> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>

// Js

 $(function(){ $("table").delegate('td','mouseover mouseleave', function(e) { if (e.type == 'mouseover') { $(this).parent().addClass("hover"); $("colgroup").eq($(this).index()).addClass("hover"); } else { $(this).parent().removeClass("hover"); $("colgroup").eq($(this).index()).removeClass("hover"); } }); })

看看这里的小提琴

实时回答（ https://jsfiddle.net/craig1123/d7105gLf/ ）

已经有CSS和JQuery的答案。我已经写了一个简单的纯JavaScript的答案，以帮助我们在那里纯粹的螺柱。

我首先find所有的col和td标签，通过做element.cellIndex获得每个单元格的列索引，然后在mouseenter上mouseenter一个背景的CSS类，并在mouseleave上删除它。

HTML

 <table id='table'> <col /> <col /> <col /> <col /> <thead> <tr> <th>Name</th> <th>Age</th> <th>Birthdate</th> <th>Preferred Hat Style</th> </tr> </thead> <tbody> <tr> <td>Abraham Lincoln</td> <td>204</td> <td>February 12</td> <td>Stovepipe</td> </tr> <tr> <td>Winston Churchill</td> <td>139</td> <td>November 30</td> <td>Homburg</td> </tr> <tr> <td>Rob Glazebrook</td> <td>32</td> <td>August 6</td> <td>Flat Cap</td> </tr> </tbody> </table>

CSS

 body { font: 16px/1.5 Helvetica, Arial, sans-serif; } table { width: 80%; margin: 20px auto; border-collapse: collapse; } table th { text-align: left; } table tr, table col { transition: all .3s; } table tbody tr:hover { background-color: rgba(0, 140, 203, 0.2); } table col.hover { background-color: rgba(0, 140, 203, 0.2); } tr, col { transition: all .3s; } tbody tr:hover { background-color: rgba(0,140,203,.2); } col.hover { background-color: rgba(0,140,203,.2); }

 const col = table.getElementsByTagName('col'); const td = document.getElementsByTagName('td'); const columnEnter = (i) => col[i].classList.add('hover'); const columnLeave = (i) => col[i].classList.remove('hover'); for (const cell of td) { const index = cell.cellIndex; cell.addEventListener('mouseenter', columnEnter.bind(this, index)); cell.addEventListener('mouseleave', columnLeave.bind(this, index)); }

这是一个小提琴

cols，colgroups和css：hover psuedoclass

将行名转换为第一列