cols,colgroups和css：hover psuedoclass

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

作为其中的一部分，我想：on hover，for the< tr>和< col> (或< colgroup>)也被突出显示，以便交叉点更明显。

由于表格将同时包含公制和英制测量，因此：悬停不必停止在单元格(从任何方向)，实际上，如果它从一个轴延伸到另一个轴是一个奖金。我也使用XHTML 1.1 Strict 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的病房吗？

解决方法

这里是一个没有Javascript的纯CSS方法。

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

这是没有必要的，但我也让它选择只是行或列，当你在标题。 .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>

原文地址：https://www.jb51.cc/css/220298.html