<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小米商城</title> <style> #frist-div{ background-color:azure; width:50px; height:20px; text-align:center; line-height:20px; float:left; } #frist-div:hover{ background-color:orange; } #frist-div:hover+#second-div{ opacity:1; } #second-div { border: hidden; text-align: right; width: 200px; height: 300px; background-image: url('lib/miselect.bmp'); background-size:80px 300px; background-repeat:no-repeat; margin-left:50px; opacity:0; } </style> </head> <body> <div id="frist-div">手机</div> <div id="second-div"> <br />XiaomiMIX系列<br /><br /> Xiaomi数字系列<br /><br /><br /> Xiaomi Civi系列<br /><br /><br /> Redmi K系列<br /><br /> Redmi Note系列<br /> <br />Redmi 数字系列 </div> </body>