如何使用 CSS 在悬停时突出显示表格中的行和列？-css教程-PHP中文网

如何使用 CSS 在悬停时突出显示表格中的行和列？

Barbara Streisand

发布： 2024-11-08 05:04:02

原创

763 人浏览过

How to Highlight Rows and Columns in a Table on Hover Using CSS?

使用 CSS 在悬停时突出显示表格中的行和列

在这个问题中，用户的目标是突出显示悬停时的行和列将鼠标悬停在 HTML 表格中。他们希望突出显示从一个轴延伸到另一个轴，并在悬停的单元格处相交。

CSS 解决方案

这是一个纯 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: '<pre class="brush:php;toolbar:false"><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>

登录后复制

a0'; height: 100%; left: -5000px; position: absolute; top: 0; width: 10000px; z-index: -1; } td:hover::after, .col:hover::after { background-color: #ffa; content: 'a0'; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; }

说明

此 CSS 使用伪元素、绝对定位和 z 索引的组合来创建所需的效果。