Html/CSS的应用（4）

原创于 2022-05-12 08:24:54 发布 · 143 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

Html/CSS/Js网页专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用CSS创建基础的提示框（Tooltip），通过HTML和CSS代码实例展示了如何在鼠标悬停时显示菜单信息，适合前端开发者学习CSS布局技巧。

使用CSS的提示框

基础提示框(Tooltip)

提示框在鼠标移动到指定元素上显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html/CSS的应用(4)</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #fff;
    color:black;
    text-align: center;
    border-radius: 5px;
    padding: 0px 0;

    /* 定位 */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">

<div class="tooltip">菜单
  <span class="tooltiptext">←菜单栏</span>
</div>

</body>
</html>

以下是效果图↓（局部）