Cols、colgroups 和 css “:hover"伪类

本文介绍了Cols、colgroups 和 css “:hover"伪类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个表格来显示个人的 BMI.

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

作为其中的一部分，我希望在 :hover 上，对于 <tr> 和 <col>(或 )也要高亮显示，以使交集更明显.

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 文档类型，如果这有区别?

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 保持下方的突出显示，以防您需要处理点击事件.position: absolute 允许他们离开的范围.overflow: hidden 在

上隐藏高亮溢出.

I used ::before and ::after pseudo-elements to do the row and column highlighting. z-index keeps the highlighting below the <td>s 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: '0a0';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -1;
}

td:hover::after,
.col:hover::after {
    background-color: #ffa;
    content: '0a0';
    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"伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 06:28