html鼠标悬停出现文字

作者：月冷清发布日期:2025-05-07 浏览:41

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义一个容器，用于放置悬停时显示的文字 */
        .tooltip {
            position: relative;
            display: inline-block;
        }

        /* 隐藏默认状态下文字 */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;

            /* 定位在元素的上方 */
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;

            /* 渐入渐出效果 */
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* 当鼠标悬停在容器上时，显示文字 */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>

<!-- 使用 tooltip 类创建一个带有悬停提示的元素 -->
<p>将鼠标悬停在我身上:
    <span class="tooltip">点这里
        <span class="tooltiptext">这是提示文字</span>
    </span>
</p>

</body>
</html>

解释说明：

HTML 结构:
- 使用 <span> 标签包裹需要显示悬停提示的文字，并给它添加 tooltip 类。
- 在 tooltip 类中嵌套一个 tooltiptext 类，用于定义提示文字的具体内容。
CSS 样式:
- .tooltip 类：定义了一个相对定位的容器，确保提示文字可以相对于该容器进行绝对定位。
- .tooltiptext 类：设置了提示文字的样式（如背景色、字体颜色、边框等），并初始状态下将其隐藏（visibility: hidden 和 opacity: 0）。
- .tooltip:hover .tooltiptext：当鼠标悬停在 tooltip 上时，提示文字会显示出来（visibility: visible 和 opacity: 1），并且有渐入渐出的效果。

上一篇：xml和html区别

下一篇：html网页制作源代码