实现功能: 鼠标移入显示下拉列表, 移除时恢复正常
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title > 第一个 JS 程序 </title>
<style type="text/CSS">
ul{padding: 0px;margin: 0px;}
li{ list-style:none; }/* 将列表前面的无序列表默认图标去除 */
.mon { width:80px; height:30px; border:1px solid #333; position:relative; }/* 指定是哪个 li*/
.mon a { display:block; line-height:30px; text-align:center; text-decoration:none; color:#000; background:#f1f1f1; }/* 指定是哪个 li 里的 a 链接, 去除文字默认的下划线, 可见 */
ul ul { padding:0; margin:0; width:140px; border:1px solid #333; position:absolute; top:30px; background:#FF9; display: none; }/* 指定第二个 ul, 定位, 不可见 */
ul ul li { text-align:center; line-height:30px;}
ul ul li a{ text-decoration: none;}/* 去下划线 */
</style>
</head>
<body>
<ul><!-- 主列表 -->
<li class="mon" id="month"><a href="#" id="link"> 月份 </a>
<ul id="c1"><!-- 下拉列表 -->
<li><a href="#">1 月 </a></li>
<li><a href="#">2 月 </a></li>
<li><a href="#">3 月 </a></li>
<li><a href="#">4 月 </a></li>
</ul>
</li>
</ul>
<script type="text/javascript">/*js 中的注释, 此标签代表引入 js*/
var li = document.getElementById('month')
var ul = document.getElementById('c1')
var a = document.getElementById('link')
/*
var 代表定义变量, 可定义数字, 字符, 和上面段子...
注意: var 中变量代表的东西在此之前的代码中必须有, 不然浏览器解析为错我, 变量为空
*/
li.onmouseover = show;/* 当鼠标移入时调用 show 函数 */
li.onmouseout = hide;/* 当鼠标移出时调用 hide 函数 */
/*
如果没有在上面定义 var 变量, 就要写成
document.getElementById('month').onmouseover = show;
*/
function show(){
ul.style.display = 'block';
a.style.background = 'yellow';
}
/*function 代表函数, 函数名可有可无, 但是此例中要求有 */
function hide(){
ul.style.display = 'none';
a.style.background = '#f1f1f1';
}
</script>
</body>
</html>
说明: 上例中
来源: http://www.jianshu.com/p/0f9d579e0a54