使用hover伪类选择器显示图片

最新推荐文章于 2024-08-09 16:06:18 发布

序列A

最新推荐文章于 2024-08-09 16:06:18 发布

阅读量1.3k

点赞数 1

分类专栏： web慢文章标签： css html 前端 web hover显示图片

本文链接：https://blog.csdn.net/lu10505/article/details/103932071

版权

web慢专栏收录该内容

32 篇文章 0 订阅

订阅专栏

Html代码：

<div class="scan">
	<div class="scanp">
		<img src="images/qrcode.png" alt="">
		<div class="t"></div>
	</div>
	<img src="images/scan.png" alt="">
</div>

Css代码：

.scan:hover .scanp{
	display: block;
}
.main-right .scanp{
	width: 280px;
	position: absolute;
	left: 0;
	top: -190px;
	text-align: center;
	display: none;
}

效果：当鼠标经过scan元素时显示scanp，scanp的位置不一定非要放在scan的div之下，此处我放在这个位置是为了方便做定位。