答案：通过position与display属性结合实现鼠标悬停显示隐藏内容。默认用display: none隐藏元素，悬停父级时设为display: block显示；父级设position: relative，子级用position: absolute精确定位，常见于下拉菜单、提示信息等场景。
在
网页设计
中，经常需要实现“鼠标悬停时显示隐藏内容”的效果，比如下拉菜单、工具提示或隐藏按钮。通过结合
position
与
display
属性，可以精准控制元素的布局与显隐状态。下面介绍如何用纯CSS实现这一效果。
基本原理：display 控制显隐，position 精确定位
核心思路是：默认状态下将隐藏内容设置为
display: none
，使其不占布局空间；当父元素被悬停时，改为
display: block
（或其他值）显示内容。同时使用
position
定位，让隐藏内容出现在期望的位置，如下方、右侧等。
常见组合方式：
父容器设为
position: relative
隐藏子元素设为
position: absolute
通过 top / left / right / bottom 调整弹出位置
实例：下拉菜单效果
以下是一个简单的导航下拉菜单示例：
立即学习
“
前端免费学习笔记（深入）
”；
Refore网页转设计
一款加速产品 UI 设计迭代的工具，可以一键将任意网页和交互导入到 Pixso、MasterGo、即时设计、Figma，实现像素级还原。
下载
CSS 样式如下：
关键点说明
为什么用 position: relative + absolute？
relative 让父容器成为定位上下文，absolute 使子元素脱离文档流并相对于父元素定位，避免影响其他布局。
display 与 visibility 的区别
-
display: none
完全移除元素，不占空间
-
visibility: hidden
隐藏但保留空间
通常选择
display
更适合做“出现/消失”类交互。
注意 z-index（层级）问题
如果隐藏内容被其他元素遮挡，可添加
z-index: 1
提升层级。
适用场景与扩展建议
这种模式适用于：
导航下拉菜单
图片悬停显示操作按钮
表单项的提示信息
进阶技巧：
配合
opacity
和
transition
实现淡入动画
使用
:focus-within
支持键盘访问（提升无障碍体验）
移动端考虑添加点击触发逻辑（纯CSS可用 :focus 或 checkbox hack）
基本上就这些。掌握
display
控制显隐、
position
精确定位的组合，就能灵活实现各类悬停展示效果。
选项 1
选项 2
选项 3
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 0;
display: none; / 默认隐藏 /
min-width: 120px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.dropdown:hover .dropdown-content {
display: block; / 悬停时显示 /
}
.dropdown-content a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
.dropdown-content a:hover {
background: #f5f5f5;
}