简单的多级hover

最新推荐文章于 2022-04-28 12:59:47 发布

音色丽敏

最新推荐文章于 2022-04-28 12:59:47 发布

阅读量350

点赞数

分类专栏：原生javascript 文章标签：简单的多级hover

本文链接：https://blog.csdn.net/qq_40756247/article/details/90640652

版权

原生javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简单的多级hover效果

以下是效果图：
在这里插入图片描述
效果十分简单就不解释了，下面是代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
    
    li{
      cursor: pointer;
    }

		.first {
			list-style: none;
			display: flex;
			align-items: center;
			background-color: aqua;
			width: 600px;
			margin: 50px;
		}

		.second {
			text-align: center;
			color: black;
			width: 120px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: large;
		}

		.second11 {
			display: none;
			position: absolute;
			margin-top: 150px;
			list-style: none
		}

		.second12 {
			display: none;
			position: absolute;
			margin-top: 100px;
			margin-left: 120px;
			list-style: none
		}

		.sanjiao {
			width: 0;
			height: 0;
			border-width: 10px 0 10px 10px;
			border-style: solid;
			border-color: transparent transparent transparent #333;
			margin-top: -21px;
			margin-left: 85px;
		}

		ul {
			display: inline-block;
			margin-right: 0 px;
		}

		.yanse {
			text-align: center;
			color: black;
			width: 120px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: large;
			background-color: pink;
		}

		.yanse2 {
			text-align: center;
			color: black;
			width: 120px;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: large;
			background-color: greenyellow;
		}
    
    .second:hover {
    	color: white;
    	background-color: blue;
    }
    
    li:hover .second11 {
    	display: block;
    }
    
    .yanse:hover {
    	color: white;
    	background-color: blue;
    }
    
    .yanse:hover .second12 {
    	display: block;
    }
    
    .yanse2:hover{
      color: white;
      background-color: blue;
    }
	</style>
	<body>
		<div>
			<ul class="first">
				<li class="second">走进和生</li>
				<li class="second">核心业务
					<ul class="second11">
						<li class="yanse">一级菜单<div class="second12 sanjiao"></div>
							<ul class="second12">
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
							</ul>
						</li>
						<li class="yanse">一级菜单<div class="second12 sanjiao"></div>
							<ul class="second12">
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
							</ul>
						</li>
						<li class="yanse">一级菜单<div class="second12 sanjiao"></div>
							<ul class="second12">
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
								<li class="yanse2">二级菜单</li>
							</ul>
						</li>
						<li class="yanse">一级菜单</li>
						<li class="yanse">一级菜单</li>
					</ul>
				</li>
				<li class="second">核心我业务</li>
				<li class="second">核心业务</li>
				<li class="second">核心业务</li>
			</ul>
		</div>
	</body>
</html>

音色丽敏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的多级hover

简单的多级hover效果以下是效果图：效果十分简单就不解释了，下面是代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ...
复制链接

扫一扫