js实现鼠标移入移出小特效!

来源：互联网发布：淘宝商品上架时间查询编辑：程序博客网时间：2024/05/16 08:25

<html>
<head>
<style>
ul{margin: 0; padding: 0; list-style: none; text-align: center; line-height: 30px;}
.wap{ width: 80px; height: 30px; border: #333 solid 1px; position: relative;}
.wap a{line-height: 30px; display: block; text-decoration: none; color :#000; background: #f1f1f1;}
.ull {width:140px; border: #333 solid 1px; position: absloute; top: 30px; left: -1px; background: #FF9; display: none;}
</style>
</head>
<body>
<ul>
<li id="list" class="wap">
<a href="#" id="link">微博</a>
<ul id="ull">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>

var li = document.getElementById('list') /*

var ul = document.getElementById('ul') 声明，简化代码。

var a = document.getElementById('link') */

document.getElementById('list').onmouseover = abc; //当鼠标移入命令命名 li .onmouseover = abc;
document.getElementById('list').onmouseout = cba; //当鼠标移出命令命名 li.onmouseover = cba;
function abc(){ //函数、作用
document.getElementById('ull').style.display = 'block'; //找到微博下方<li>标签里的元素，并显示出来。 ul.style.display = 'block';
document.getElementById('link').style.background = 'yellow'; //当鼠标移入指向“微博”改变背景颜色。 a.background = 'yellow';
}
function cba(){
document.getElementById('ull').style.display = 'none'; //找到微博下方<li>标签里的元素，并隐藏。 ul.style.display = 'none';
document.getElementById('link').style.background = 'f1f1f1'; //当鼠标移出“微博”还原背景颜色。 a.style.background = 'f1f1f1';

}

/* 采用匿名函数简化代码最终效果！

window.onload = function () {

var li = document.getElementById('list');

var ul = document.getElementById('ull');

var a = document>getElementById('link');

li.onmouseover = function () {

ul.style.display = 'block';

a.background = 'yelow';

}

li.onmouseout = function () {

ul.style.display = 'none';