滑过显示，鼠标离开隐藏js-19

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#o1{width:80px;height:20px;line-height:20px;text-align:center;background:#39C;color:#fff;}
#o2 li{width:80px;height:20px;line-height:20px;text-align:center;background:#39C;color:#fff;}
#o2{display:none;}
</style>
</head>

<body>
<div id="o3">
<h3 id="o1">下拉1</h3>
<ul id="o2">
    <li>ok1</li>
    <li>ok2</li>
    <li>ok3</li>
    <li>ok4</li>
    <li>ok5</li>
</ul>
</div>
<script>
var but1=document.getElementById("o1");
var but2=document.getElementById("o2");
var but3=document.getElementById("o3");
but3.onmouseover=function(){
    but2.style.display="block";
};
but3.onmouseout=function(){
    but2.style.display="none";
};

</script>
</body>
</html>

posted @ 2018-01-09 17:30  南瓜小园  阅读(113)  评论(0)  编辑  收藏  举报