实现效果：当鼠标滑过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>
