初学JS值之用JS实现鼠标移入移出事件

来源：互联网发布：makerbot软件下载编辑：程序博客网时间：2024/05/20 17:09

<!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>

0 0