1初识JavaScript
作者:
夜息白鸽 | 来源:发表于
2017-01-15 17:36 被阅读0次
移入移除下拉菜单
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; }
.lis { width:80px; height:30px; border:1px solid #333; position:relative; }
.lis a { display:block; line-height:30px; text-align:center; text-decoration:none; color:#000; background:#f1f1f1; }
ul ul { padding:0; margin:0; width:140px; border:1px solid #333; position:absolute; top:30px; left:-1px; background:#FF9; display:none; }
ul ul li { text-align:center; line-height:30px; }
</style>
</head>
<body>
<ul>
<li id="lis" class="lis">
<a id="link" href="#">微博</a>
<ul id="ul1">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
var li = document.getElementById('lis');
var ul = document.getElementById('ul1');
var a = document.getElementById('link');
li.onmouseover = show;
li.onmouseout = hide;
function show(){
ul.style.display = 'block';
a.style.background = 'yellow';
}
function hide(){
ul.style.display = 'none';
a.style.background = '#f1f1f1';
}
</script>
</body>
</html>
调试结果
Paste_Image.png
Paste_Image.png
本文标题：1初识JavaScript
本文链接：https://www.haomeiwen.com/subject/setubttx.html
网友评论