cols,colgroups和css:悬停psuedoclass

Question

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

作为其中的一部分,我想,on:hover,for <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病房吗？

Answer 1

这是一个不使用Javascript的纯CSS方法.

我使用::before和::after伪元素来进行行和列突出显示.z-index保持突出显示<tds>在您需要处理点击事件的情况下.position: absolute允许他们离开的范围<td>.overflow: hidden在<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>

Answer 2

我在这里找到了一个非常不错的jQuery插件,它通过大量示例很好地处理了这类事情.我会优先使用它.