鼠标悬浮显示隐藏的div

freeflydom

2023年10月25日 15:47 本文热度 392

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ap{
				width: 75px;
				height: 35px;
				border: 1px solid  #000000;
				text-align: center;
				line-height: 35px;
			}
			.bp{
				display: none;
  				background-color: #f9f9f9;
  				min-width: 70px;/*最小宽度*/
  				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*向div添加阴影*/
  				padding: 14px 16px;
  				color: #000000;
			}
			.ap:hover{
				background-color: #EEEEEE;
			}
			.ap:hover .bp{
				display: block;
			}
			.pick{
				width: auto;
				height: 35px;
			}
		</style>
	</head>
	<body>
		
		<div class="ap">
			来这里
			<div class="bp">
			    <div class="pick" >惊喜1</div>
				<div class="pick" >惊喜2</div>
				<div class="pick" >惊喜3</div>
			</div>
		</div>	
	</body>
</html>

上面是实现代码，可以直接运行。

实现过程：

1、先定义两个div，将其中一个用"display：none"设为默认隐藏。

注意：隐藏的div要定义在不隐藏的div里面！

2、在CSS中用“hover”实现鼠标悬浮后显示隐藏的div.

.ap:hover .bp{

display: block;

}

查看原文

该文章在 2023/10/25 15:47:30 编辑过

关键字查询

隐藏

显示

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。