CSS小案例6：实现导航栏鼠标滑过时的小特效

最新推荐文章于 2023-04-08 18:54:17 发布

小佬呀

最新推荐文章于 2023-04-08 18:54:17 发布

阅读量1.2k

点赞数 1

分类专栏： HTML 文章标签：负外边距导航特效鼠标滑过导航高度增加

本文链接：https://blog.csdn.net/qq_36722545/article/details/96906631

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述
用盒子的负外边距实现导航高度增加的效果

   .nav2 li:hover{
         	height: 40px;
         	border-color: #666;
         	background-color: #fff;/*40-4正好是li之前的高度35+1=36*/
            margin-top: -4px;
         }

demo：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">

    li{
		list-style: none;
	}
	
	a{
		text-decoration: none;
		color: #333;
	}
	*{
		margin: 0px;
		padding: 0px;
	}
     .nav2{
     	width: 1000px;
     	height: 36px;
     	border-bottom: 1px solid #666;
     	margin:50px auto;
     }
     .nav2 li{
     	height: 35px;
     	float: left;
     	background: #f7f7f7;
     	border:1px solid #cecece;/*高度为36*/
     	margin-left: 10px;
     	line-height: 35px;
     	border-bottom: none;
     }
     .nav2 li a{
     	padding: 0 14px;
     }

     .nav2 li:hover{
     	height: 40px;
     	border-color: #666;
     	background-color: #fff;/*40-4正好是li之前的高度35+1=36*/
        margin-top: -4px;
     }
	</style>
</head>
<body>
     <ul class="nav2">
     	<li><a href="#">tab one</a></li>
     	<li><a href="#">tab one</a></li>
     	<li><a href="#">tab one</a></li>
     	<li><a href="#">tab one</a></li>
     </ul>
</body>
</html>