js菜单栏（以鼠标悬停到头像显示详细信息为例）

最新推荐文章于 2024-05-31 21:55:05 发布

Pinky_W

最新推荐文章于 2024-05-31 21:55:05 发布

阅读量2.3k

点赞数 1

分类专栏： js学习与思考文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/pinger1225/article/details/38414397

版权

本文通过JavaScript、CSS和HTML实现了一个简单的交互效果：当鼠标悬停在头像上时，显示详细信息。代码简洁易懂，适合前端初学者学习和实践。

摘要由CSDN通过智能技术生成

类似二级菜单，以qq为例，十分简单的代码

十分容易理解的原理，我觉得这段代码很奇妙，之前用过很多别人的下拉菜单，自己没有好好想过，其实不难

菜鸟充电中，fighting！

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ</title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/common.js" ></script>
	</head>
	<body>
		<img id="img1" src="img/2.jpg" />
		<img id="img2" src="img/mainPc.jpg" />
		<img id="img3" src="img/1.png" />
		
	</body>
</html>

CSS: