CSS便签样式效果，鼠标移动到指定便签显示隐藏内容

最新推荐文章于 2023-09-17 18:45:59 发布

m4587

最新推荐文章于 2023-09-17 18:45:59 发布

阅读量406

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/m4587/article/details/126063819

版权

本文介绍如何使用CSS创建一款便签样式，当鼠标移到便签上时，可以显示隐藏的内容。提供了一张完成效果的示意图，并附带了相关源码，适合前端开发者学习和交流。

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

css便签样式效果，鼠标移动到指定便签显示隐藏内容

这是效果图欢迎大家一起交流学习

这里放了源码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
	<style>
		
		#mySidenav a {
		    position: absolute;
		    left: -80px;
		    transition: 0.3s;
		    padding: 15px;
		    width: 100px;
		    text-decoration: none;
		    font-size: 20px;
		    color: white;
		    border-radius: 0 5px 5px 0;
		}
		
		#mySidenav a:hover {
		    left: 0;
		}
		
		#about {
		    top: 20px;
		    background-color: #4CAF50;
		}
		
		#blog {
		    top: 80px;