如何在CSS中实现悬停显示隐藏内容_position与display结合

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中实现悬停显示隐藏内容_position与display结合

2025-11-03

浏览次数：次

返回列表

答案：通过position与display属性结合实现鼠标悬停显示隐藏内容。默认用display: none隐藏元素，悬停父级时设为display: block显示；父级设position: relative，子级用position: absolute精确定位，常见于下拉菜单、提示信息等场景。

如何在css中实现悬停显示隐藏内容_position与display结合

在网页设计中，经常需要实现“鼠标悬停时显示隐藏内容”的效果，比如下拉菜单、工具提示或隐藏按钮。通过结合 position 与 display 属性，可以精准控制元素的布局与显隐状态。下面介绍如何用纯CSS实现这一效果。

基本原理：display 控制显隐，position 精确定位

核心思路是：默认状态下将隐藏内容设置为 display: none，使其不占布局空间；当父元素被悬停时，改为 display: block（或其他值）显示内容。同时使用 position 定位，让隐藏内容出现在期望的位置，如下方、右侧等。

常见组合方式：

父容器设为 position: relative
隐藏子元素设为 position: absolute
通过 top / left / right / bottom 调整弹出位置

实例：下拉菜单效果

以下是一个简单的导航下拉菜单示例：

立即学习“前端免费学习笔记（深入）”；

Glarity

Glarity是一款免费开源的AI浏览器扩展，提供YouTube视频总结、网页摘要、写作工具等功能，支持免费的镜像翻译，电子邮件写作辅助，AI问答等功能。

131 查看详情 Glarity

<div class="dropdown">
  <button class="trigger">悬停我</button>
  <div class="dropdown-content">
    <a href="#">选项 1</a>
    <a href="#">选项 2</a>
    <a href="#">选项 3</a>
  </div>
</div>

CSS 样式如下：

.dropdown {
  position: relative;
  display: inline-block;
}
<p>.dropdown-content {
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 0;
display: none; /<em> 默认隐藏 </em>/
min-width: 120px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}</p><p>.dropdown:hover .dropdown-content {
display: block; /<em> 悬停时显示 </em>/
}</p><p>.dropdown-content a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}</p><p>.dropdown-content a:hover {
background: #f5f5f5;
}</p>