实现简单弹出栏目js+css

来源：互联网发布：暖通工程预算软件编辑：程序博客网时间：2024/05/29 07:10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{padding:0;margin:0;}
li{list-style: none;}
.lis{ width:80px;height:30px;border:1px solid #333;position:relative;}
ul ul{padding:0;margin:0;width:140px;border:1px solid #333;position:absolute;top:30px;left:-1px;background: yellow;}/* display:none
visibility:hidden;
*/
.lis a{display:block; line-height: 30px;text-align: center; text-decoration: none; color:black;background: #f1f1f1}
ul ul li{
text-align: center;
line-height: 30px;
}
</style>
</head>
<script>
/*
随时写随时测试
js如何获取元素
通过ID找
document get element by id 'link'
document.getElementById('link')
事件：鼠标事件，键盘事件，系统事件，表单事件
onclick onmouseover onmouseout onmouseup onmousemove:抚摸事件
如何添加事件
元素.事件
函数：可以理解为命令
function abc(){
不会主动执行，需要调用
}
直接调用abc()
事件调用：元素.事件=函数名 oDiv.onclick=abc;
alert()带确定按钮警告框
*/
</script>
<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>
document.getElementById('lis').onmouseover=show;
document.getElementById('lis').onmouseout=hide;
function show(){
document.getElementById('ul1').style.display='block';
document.getElementById('link').style.background='yellow';
}
function hide(){
document.getElementById('ul1').style.display='none';
document.getElementById('link').style.background='#f1f1f1';
}
</script>
</body>
</html>

阅读全文

0 0