初學JS值之用JS實現滑鼠移入移出事件
阿新 • • 發佈：2019-01-10
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初學JS</title> <style> #webo{ width:82px; height:123px; } li{ list-style:none; } #list{ width:80px; height: 30px; position: relative; } a{ color:black; text-decoration:none; display: block; line-height: 30px; text-align: center; background: white; } #list1{ margin:0; padding:0; width:80px; display: none; } #list1 li{ line-height:30px; text-align: center; border: 1px solid orange; border-top:none; } </style> </head> <body> <div id="webo"> <ul> <li id="list"> <a id="link" href="#">微博</a> </li> <ul id="list1"> <li><a id="sx" href="#">私信</a></li> <li><a id="pl" href="#">評論</a></li> <li><a id="zw" href="#">@我</a></li> </ul> </ul> </div> <script> document.getElementById("list").onmouseover=show; document.getElementById("list").onmouseout=hide; function show(){ document.getElementById("list1").style.display="block"; document.getElementById("link").style.background="darkorange"; } function hide(){ document.getElementById("list1").style.display="none"; document.getElementById("link").style.background="white"; } </script> </body> </html>