CSS:在行悬停时显示<td>内部的跨度_悬停时的CSS显示元素_css悬停时显示隐藏的div - 腾讯云开发者社区

CSS:在行悬停时显示<td>内部的跨度

基础概念

CSS（层叠样式表）是一种用于描述HTML文档样式的语言。通过CSS，可以控制网页的布局、颜色、字体等视觉效果。:hover 是一个伪类选择器，用于选择鼠标悬停在元素上时的状态。

类型

:hover 伪类可以应用于多种HTML元素，包括 <a>, <button>, <div>, <td> 等。

应用场景

在行悬停时显示 <td> 内部的 <span> 是一种常见的交互设计，常用于表格数据的展示，当用户悬停在某一行时，显示额外的信息。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Hover Example</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .hidden {
            display: none;
        }
        tr:hover .hidden {
            display: inline-block;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td class="hidden"><span>Additional Info</span></td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td class="hidden"><span>More Info</span></td>
        </tr>
    </table>
</body>
</html>

解释

HTML结构：表格中的每一行包含三个 <td> 元素，其中第三个 <td> 包含一个 <span> 元素，并且有一个类 hidden。
CSS样式：
- .hidden 类用于隐藏 <span> 元素。
- tr:hover .hidden 选择器表示当鼠标悬停在 <tr> 元素上时，显示 .hidden 类的元素。