前端实现鼠标悬停显示内容

wwbjxx

已于 2022-11-10 12:15:49 修改

阅读量904

点赞数

文章标签： css 前端

于 2022-10-26 13:55:00 首次发布

本文链接：https://blog.csdn.net/wwbjxx/article/details/127531062

版权

html代码

<!-- 用于包含二维码所有的内容，显示在页面中的底部 -->
		<div id="box1">
			<!-- 用于显示微信图标 -->
			<div id="wechat">
				<!-- 用于显示/隐藏二维码图片 -->
				<div id="code1"></div>
			</div>
		</div>
		<!-- 用于包含二维码所有的内容，显示在页面中的底部 -->
		<div id="box2">
			<!-- 用于显示qq图标 -->
			<div id="qq">
				<!-- 用于显示/隐藏二维码图片 -->
				<div id="code2"></div>
			</div>
		</div>

css代码

<style>
			body {
				margin: 0px;
			}
			
			/*微信*/
			#box1 {
				width: 5%;
				height: 100px;
				position: fixed;
				bottom: 0px;
				top: 40%;
				/*left: 0px;*/
				right: 0px;
				/*float: right;*/
			}
			
			#wechat {
				width: 44px;
				height: 52px;
				cursor: pointer;
				background-image: url("img/wx_4.png");
				background-