实现鼠标移动到一个元素上,展示出另一个元素
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.slide{
width: 250px;
height: 430px;
background-color: #9d9b9b;
padding: 30px 0;
margin: 100px;
position: relative;
}
.slide ul{
list-style: none;
}
.slide ul li{
width: 100%;
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
box-sizing: border-box;
}
.slide ul li a{
display: inline-block;
text-decoration: none;
color: #2d2b2b;
}
.slide ul li:hover{
background-color: #865a8a;
}
.slide-list{
width: 992px;
height: 490px;
background-color: rgb(236, 229, 234);
position: absolute;
top: 0;
left: 250px;
border: 1px solid #e0e0e0;
border-left: none;
box-shadow: 0 8px 16px rgb(0,0,0,0.18);
display: none;
}
.slide ul li:hover > .slide-list{
display: block;
}
i{
margin-left: 150px;
}
</style>
</head>
<body>
<!-- 滑动门的结构 -->
<div class="slide">
<ul>
<li>
<a href="#">小学<i>>></i></a>
<div class="slide-list">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>品德</li>
<li>科学</li>
</ul>
</div>
</li>
<li>
<a href="#">初中<i>>></i></a>
<div class="slide-list">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>