cols，colgroups和css：hover psuedoclass [英] cols, colgroups and css :hover psuedoclass

问题描述

我尝试创建一个表格来显示个人的BMI。

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

作为其中的一部分，我想要：hover， c $ c>< tr> 和 < col> （或

As 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.

由于表格将同时包含公制和英制测量值，因此， ，悬停不需要停止在单元格（从任何方向），事实上，如果它从一个轴延伸到另一个是一个奖金。我也使用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吗？

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> 下，以防您需要处理点击事件。 position：absolute 允许他们离开< td> 的限制。在< table> 上的 overflow：hidden 隐藏高亮溢出。

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>

这篇关于cols，colgroups和css：hover psuedoclass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！