列，列组和CSS的“：hover”伪类 [英] Cols, colgroups and css ":hover" pseudoclass

问题描述

我正在尝试创建一个表以显示个人的BMI。

I'm trying to create a table to display an individual's BMI.

作为一部分，我想在 ：悬停，表示< tr> 和 < col> （或< colgroup> ），以使交集更加明显。

As a part of this, I'd like, on :hover, for the <tr> and <col> (or <colgroup>) to be highlighted also, in order for the intersection to be more apparent.

由于该表将同时具有公制和英制尺寸，所以：hover不必停在单元格（从任何方向），实际上，如果它从一个轴延伸到另一个轴，则将是一个奖励。我也使用XHTML 1.1 Strict doctype，如果这样做有所不同？

As the table will feature both metric and imperial measurements, the :hover doesn't have to stop at the cell (from any direction) and would, in fact, be a bonus if it extended from one axis to the other. I'm also using the XHTML 1.1 Strict doctype, if this makes a difference?

所以...一个例子（实际表的...更大），但这应该具有代表性：

So... an example (the real table's... larger), but this should be representative:

<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-wards吗？

Am I asking the impossible, do I need to go JQuery-wards?

推荐答案

这是不使用Javascript的纯CSS方法。

Here's a pure CSS method using no Javascript.

我使用 :: before 和 :: after 伪元素用于突出显示行和列。 z-index 将突出显示保持在< tds> 下面，以防您需要处理点击事件。 位置：绝对允许他们离开< td> 的范围。 溢出：隐藏在< table> 上的隐藏突出显示的溢出。

I used ::before and ::after pseudo-elements to do the row and column highlighting. z-index keeps the highlighting below the <tds> in case you need to handle click events. position: absolute allows them to leave the confines of the <td>. overflow: hidden on the <table> hides the highlight overflow.

这不是必需的，但是当您在标题中时，我也使它仅选择行或列。 .row 和 .col 类解决了这个问题。如果希望简化，可以将其删除。

It wasn't necessary, but I also made it select just the row or column when you're in the headers. The .row and .col classes take care of this. If you wish the simplify, you can remove them.

此功能在所有现代浏览器中均有效（并且在旧的浏览器上不进行任何操作就可以正常降级）。

This works in all modern browsers (and degrades gracefully on older browsers by doing nothing).

演示： 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>

这篇关于列，列组和CSS的“：hover”伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！