cols,colgroups和css:hover psuedoclass

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/220298.html

猜你在找的CSS相关文章