CSS制作导航做从下到上的过渡效果

最新推荐文章于 2024-05-30 11:43:16 发布

BangD

最新推荐文章于 2024-05-30 11:43:16 发布

阅读量776

点赞数

分类专栏： css 文章标签： html css 前端

本文链接：https://blog.csdn.net/BangD/article/details/126309616

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

记录自己遇到的一个问题：两个盒子，第二个覆盖第一个时候文字不覆盖。

方案：外层盒子包含了叠加的两个盒子第一个盒子负责展示，第二个盒子定位到下方，层级设置低些以隐藏。鼠标滑过外层盒子，第二个盒子定位占据第一个盒子的位置

会覆盖了外层盒子和第一个盒子。需要提高第一个盒子的优先级，覆盖第二个盒子之上。由于第一个盒子只有文字，背景是透明的。就达到了文字会显示，背景也替换

的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			

			.box1 {
				position: relative;
				display: block;
				height: 40px;
				width: 90px;
				margin: 20px 0 0 50px;
				/* background-color: #000; */
				text-align: center;
				line-height: 40px;
			}

			i {
				position: absolute;
				left: 0;
				top: 100px;
				display: block;
				width: 90px;
				height: 40px;
				background-color: #f00;
				transition: all .2s ease;
				font-style: normal;
				/* color: #fff; */
			}

			span {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				display: block;
				background: rgba(0, 0, 0, 0);
				
				width: 90px;
				height: 40px;
				color: #000;
			}

			.box1:hover i {
				top: 0;
			}
		</style>
	</head>
	<body>
		

		<a class="box1">
			<span>首页</span>
			<i></i>
		</a>
	</body>
</html>