实现效果:当鼠标滑过tab标签时,实现对应标签的内容切换
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
div {
position: relative;
width: 1550px;
height: 900px;
padding: 0;
}
li {
list-style: none;
float: left;
width: 150px;
height: 40px;
line-height: 40px;
border: 1px solid pink;
box-sizing: border-box;
margin-left: -1px;
text-align: center;
cursor: pointer;
}
li .detail {
display: none;
position: absolute;
border: 1px solid pink;
width: 1000px;
height: 800px;
left: 39px;
top: 39px;
z-index: -1;
}
li:hover {
border-bottom-color: #fff;
}
li:hover .detail {
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<span>tab1</span>
<div class="detail">tab1 content</div>
</li>
<li>
<span>tab2</span>
<div class="detail">tab2 content</div>
</li>
<li>
<span>tab3</span>
<div class="detail">tab3 content</div>
</li>
<li>
<span>tab4</span>
<div class="detail">tab4 content</div>
</li>
<li>
<span>tab5</span>
<div class="detail">tab5 content</div>
</li>
</ul>
</div>
</body>
</html>