使用jQuery完成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <script src="jQuery/jquery-3.1.0.min.js"></script> <style> #menu{ margin-top: 100px; margin-left: 200px; list-style: none; display: block; height: 50px; } #menu li{ margin-top: -2%; list-style: none; float:left; height:50px; width:150px; line-height: 50px; background-color: #e5eaef; color: #3528fa; text-align: center; font-family: '微软雅黑'; } #menu ul{ display: none; } div{ position: absolute; height: 150px; left:250px; display: none; } #menu li:hover{ color: pink; background-color: #e7faf7; font-family: '微软雅黑'; } .choosed{ display: block; } </style> </head> <body> <ul id="menu"> <li>立秋<div ><img src="1.jpg"></div></li> <li>处暑<div><img src="2.jpg"></div></li> <li>秋分<div><img src="3.jpg"></div></li> <li>寒露<div><img src="4.jpg"></div></li> </ul> <script> $(document).ready(function() { $('#menu li').hover(function() { $('div',this).slideDown(300); $('div',this).addClass("choosed");}, function() { $('div',this).slideUp(300); $('div',this).removeClass("choosed");}) }); </script> </body> </html>