鼠标hover弹出菜单

 网页左上角有一个按钮,当鼠标经过的时候,弹出一个自定义菜单

代码如下:

<style>
::-webkit-scrollbar {width:0px;}
*{margin:0;padding:0;}
body{background-repeat:no-repeat;background-position:center;
	background:linear-gradient(0deg,rgba(99, 0, 255, 0.3), rgba(88, 0, 255, 0.6)),url(https://cjj.zone/xxx/gif/海水.gif);background-size:cover;height:100vh;}
.menu {width:20px;height:20px;line-height:20px;color:#fff;text-align:left;font-size:20px;position:fixed;left:0;top:0;overflow:hidden;padding:20px;}
.menu:hover {width:280px;height:100vh;background-color:#111;color:#000;opacity:0.7;}
.myzybox{height:100%;width:230px;margin:0 0 0 50px;}
.zhuye{display:block;width:150px;height:30px;line-height:30px;border-bottom:1px #1a1a1a solid;color:#888;font-size:14px;padding-left:2px;text-decoration:none;font-family:"微软雅黑";}
.zhuye:hover{color:#008e6e;width:144px;padding:0 0 0 6px;transition:all 0.2s ease-in-out;}
.zhuye img{display:block;float:left;width:13px;height:auto; margin:8px 5px 0 0;}
</style>
	
<div class="menu">
	<b>☰</b>
	<div class="myzybox">	
		<a class="zhuye" href="https://gitee.com/cjj_uid" target="_blank"><img src="https://gitee.com/favicon.ico">Gitee</a>
		<a class="zhuye" href="https://github.com/JJ1115451756" target="_blank"><img src="https://github.com/favicon.ico">Github</a>
		<a class="zhuye" href="https://gitlab.com/cjj.today" target="_blank"><img src="https://about.gitlab.com/images/icons/logos/slp-icon.svg">GitLab</a>
		<a class="zhuye" href="https://my.oschina.net/1115451756" target="_blank"><img src="https://static.oschina.net/new-osc/img/favicon.ico">OSCHINA</a>
		<a class="zhuye" href="https://blog.csdn.net/JJ1115451756" target="_blank"><img src="https://blog.csdn.net/favicon.ico">CSDN</a>
		<a class="zhuye" href="https://blog.51cto.com/13984984" target="_blank"><img src="https://blog.51cto.com/favicon.ico">51CTO</a>
		<a class="zhuye" href="https://www.yuque.com/cjj.today" target="_blank"><img src="https://gw.alipayobjects.com/zos/rmsportal/UTjFYEzMSYVwzxIGVhMu.png">语雀</a>
		<a class="zhuye" href="https://www.zhisheji.com/space-uid-150671.html" target="_blank"><img src="https://www.zhisheji.com/favicon.ico">致设计</a>
		<a class="zhuye" href="https://www.zcool.com.cn/u/14814302" target="_blank"><img src="https://static.zcool.cn/git_z/z/site/favicon.ico?version=1645763753035">ZCOOL</a>
		<a class="zhuye" href="https://huaban.com/cjjuid" target="_blank"><img src="https://huaban.com/favicon.ico">花瓣</a>
		<a class="zhuye" href="https://www.58pic.com/u/4082948/" target="_blank"><img src="http://www.58pic.com/favicon.ico">千图网</a>
		<a class="zhuye" href="https://weibo.com/cjjuid" target="_blank"><img src="https://weibo.com/favicon.ico">Sina</a>
		<a class="zhuye" href="https://tiangeclub.lofter.com/" target="_blank"><img src="https://lofter.com/favicon.ico">LOFTER</a>
		<a class="zhuye" href="https://www.zhihu.com/people/i2356" target="_blank"><img src="https://static.zhihu.com/heifetz/favicon.ico">知乎</a>
		<a class="zhuye" href="https://space.bilibili.com/492212413" target="_blank"><img src="https://space.bilibili.com/favicon.ico">bilibili</a>
		<a class="zhuye" href="http://blog.sina.com.cn/s/articlelist_5579810778_0_1.html" target="_blank"><img src="http://blog.sina.com.cn/favicon.ico">新浪博客</a>
		<a class="zhuye" href="http://new.yizhibo.com/member/personel/user_info?memberid=25989178&jumpbrowser=1" target="_blank"><img src="http://new.yizhibo.com/favicon.ico">一直播</a>
		<a class="zhuye" href="https://www.meipai.com/user/1053854976?single_column=0" target="_blank"><img src="https://www.meipai.com/favicon.ico">美拍</a>
		<a class="zhuye" href="https://699pic.com/photographer/336560" target="_blank"><img src="http://699pic.com/favicon.ico">摄图网</a>
		<a class="zhuye" href="https://500px.com.cn/cjjzone" target="_blank"><img src="https://500px.com.cn/images/favicon_n.ico">视觉500px</a>
		<a class="zhuye" href="https://www.skypixel.com/users/JackChen-e971beb8-1f29-4deb-9546-1cc38166a77c" target="_blank"><img src="https://spcn-webfront.skypixel.com/skypixel/public/favicon.ico">天空之城</a>
		<a class="zhuye" href="http://www.cjjuid.poco.cn/" target="_blank"><img src="https://www.poco.cn/favicon.ico">poco摄影网</a>
		<a class="zhuye" href="https://shiyi.tuchong.com/" target="_blank"><img src="https://tuchong.com/favicon.ico">图虫</a>
		<a class="zhuye" href="https://my.fengniao.com/i2356" target="_blank"><img src="https://my.fengniao.com/favicon.ico">蜂鸟网</a>
		<a class="zhuye" href="https://node.kg.qq.com/personal?uid=639b948c2c2b318933" target="_blank"><img src="https://node.kg.qq.com/favicon.ico">全民K歌</a>
		<a class="zhuye" href="https://music.163.com/#/user/home?id=61868641" target="_blank"><img src="https://s1.music.126.net/style/favicon.ico?v20180823">网易云</a>
		<a class="zhuye" href="https://y.qq.com/n/ryqq/profile/like/song" target="_blank"><img src="https://y.qq.com/favicon.ico?max_age=2592000">QQ音乐</a>
		<a class="zhuye" href="https://www.douyin.com/user/MS4wLjABAAAA0w_IxSATZ5SktaQbLMMYt9o3MkR9W60bmrVDzomdUeA" target="_blank"><img src="https://lf1-cdn-tos.bytegoofy.com/goofy/ies/douyin_web/public/favicon.ico">抖音</a>
		<a class="zhuye" href="https://www.kuaishou.com/profile/3xzfnqidbqmjgdu" target="_blank"><img src="https://static.yximgs.com/udata/pkg/WEB-LIVE/kwai_icon.8f6787d8.ico">快手</a>
	</div>
</div>	

这里的内容可以用表格来梳理,更方便,更清晰(用Excel或者wps)
个人推荐用语雀

THE END
觉得有用就给点个赞呗
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容