css+html实现鼠标滑过出现下拉菜单

最新推荐文章于 2023-12-01 12:58:10 发布

懿范

最新推荐文章于 2023-12-01 12:58:10 发布

阅读量1.6k

点赞数 1

分类专栏：实习工作记录文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_43312392/article/details/129020620

版权

实习工作记录专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css+html实现鼠标滑过出现下拉菜单

页面效果

页面效果

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

静态页面

鼠标滑过

html代码

<div class="qrcode">
	<div class="qrcodehover">
		<div class="qrcodeImg"> </div>
		<p class="textqrcode">阿里巴巴客户端</p>
		<p class="textqrcode">扫一扫进入手机旺铺</p>
	</div>
</div>

css样式

.qrcode {
	width: 74px;
	height: 24px;
	align-self: flex-start;
	position: relative;
	cursor: pointer;
	color: rgb(102, 102, 102);
	background: url('../images/phonevisit.png') 0% 0% / cover no-repeat;	
	margin-right: 28px;
}

.qrcodehover {
	display: none;
	position: absolute;
	top: 30px;
	left: -30px;
	width: 130px;
	height: 170px;
	z-index: 999;
	background-color: rgb(255, 255, 255);
	box-shadow: rgb(153 153 153) 0px 2px 10px;
	border-radius: 4px;

}

.qrcodeImg {
	width: 110px;
	height: 110px;
	background-repeat: no-repeat;
	background-size: 110px 110px;
	margin: 10px auto;
	background-image: url('../images/imgqrcode.png');
}

.qrcode:hover .qrcodehover {
	display: block;
}

.textqrcode {
	font-size: 12px;
	width: 100%;
	text-align: center;
	color: rgb(170, 170, 170);
	margin: 0px;
}