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所有的coltd标签,通过做element.cellIndex获得每个单元格的列索引,然后在mouseentermouseenter一个背景的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); } 

JS

 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)); } 

这是一个小提琴

    Interesting Posts