Cols、col groups 和 css ":hover" 伪类

我正在尝试创建一个表格来显示个人的体重指数。

作为其中的一部分，我想:hover， 为了<tr> and <col> (or <colgroup>）也被突出显示，以便交叉点更加明显。

由于表格同时具有公制和英制测量值，因此 :hover 不必停止在单元格处（从任何方向），事实上，如果它从一个轴延伸到另一个轴，这将是一个额外的好处。我还使用 XHTML 1.1 Strict 文档类型，这是否有影响？

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

<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 方法。

I used ::before and ::after伪元素来突出显示行和列。z-index保持突出显示在下面<td>以防您需要处理点击事件。position: absolute允许他们离开环境的限制<td>. overflow: hidden on the <table>隐藏突出显示溢出。

这不是必需的，但当您位于标题中时，我也让它仅选择行或列。这.row and .col类会处理这个问题。如果您希望简化，可以删除它们。

这适用于所有现代浏览器（并且在旧浏览器上不执行任何操作即可优雅地降级）。

Demo: http://jsfiddle.net/ThinkingStiff/rUhCa/

Output:

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>