为了写页面硬着头皮上HTML，一切从0开始，但愿我能OK!
html5.jpg
【前言】
HTML是框架，CSS是样式，JS是行为，JS越牛逼，工资越高！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示鼠标移上和移出显示下拉数据效果</title>
<style>
ul{
margin: 0;
padding: 0;
display: none;
}
li{
list-style: none;
}
#box {
width:200px;
margin: 0 auto;
font: 30px/60px "simhei";
text-align: center;
}
#box span{
display: block;
height: 60px;
border: 1px solid #1B1509;
}
#box ul{
border: 1px solid #1B1509;
margin-top: 6px;
}
#box li{
height: 60px;
}
#box li:hover {
background: #4136E2;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<span id="span1">设置</span>
<ul id="ul1">
<li>我的设置</li>
<li>密码修改</li>
<li>找回密码</li>
<li>退出</li>
</ul>
</div>
</body>
<script>
// 定义变量和赋值
var oDIV=document.getElementById('box');
var oul=document.getElementById('ul1');
// js操作，鼠标移上和移除
oDIV.onmouseover=function(){
oul.style.display='block';
}
oDIV.onmouseout=function(){
oul.style.display='none';
}
</script>
</html>
网友评论