如何使用 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 索引的组合来创建所需的效果。

• ::before 和 ::after 伪元素在目标元素（行和行）之前和之后创建不可见的框列）。
• 绝对定位允许这些框超出其父元素的范围。
• 将 z-index 设置为 -1 可确保这些框位于实际表格单元格下方，从而防止它们出现以免干扰用户

HTML

相应的 HTML 标记如下：

在此标记中，.row 和 . col 类被添加到表头元素中，以将它们与常规行和列区分开，从而允许不同的样式，如果

此解决方案提供了一种灵活的方法来突出显示悬停时的表格行和列，无需 JavaScript 或任何外部库。

以上是如何使用 CSS 在悬停时突出显示表格中的行和列？的详细内容。更多信息请关注PHP中文网其他相关文章！