鼠标经过li行时背景颜色渐隐切换改变，快速滑动鼠标时渐隐切换效果更明显，可根据自己网站色彩搭配来修改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>鼠标感应背景颜色渐隐切换效果_武鸣人</title>
<style type="text/css">
body,ul,h2,p{margin:0;padding:0;font-family:"微软雅黑";background:#333;}
li{list-style:none;}
a{text-decoration:none;}
#box_wuming_ren{width:270px;padding:10px 10px 20px;overflow:hidden;margin:20px 50px 50px 50px;border:1px solid #FFF;}
.internal{width:266px;float:left;}
#box_wuming_ren h2{height:38px;border-bottom:1px solid #ccc;padding-left:5px;}
#box_wuming_ren h2 strong{float:left;line-height:38px;color:#885050;}
#box_wuming_ren h2 a{float:right;width:52px;height:14px;font-size:12px;text-indent:20px;color:#fff;line-height:12px;font-weight:normal;margin-top:10px;}
#box_wuming_ren li{height:30px;position:relative;border-bottom:1px dashed #ccc;}
#box_wuming_ren li div,#box_wuming_ren li p{height:30px;position:absolute;top:0;left:0;width:100%;}
#box_wuming_ren li p{background:#fff;opacity:0;filter:alpha(opacity=0);}
#box_wuming_ren li div a,#box_wuming_ren li div span{line-height:30px;font-size:12px;height:30px;}
#box_wuming_ren li div a{float:left;padding-left:5px;color:#7F5454;width:185px;overflow:hidden;}
#box_wuming_ren li div span{padding-right:10px;float:right;color:#CF9494;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oLeave=new Leave('box_wuming_ren');
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function Leave(id)
{
_this=this;
this.oBox=document.getElementById(id);
this.aLi=this.oBox.getElementsByTagName('li');
var i=0;
for(i=0;i<this.aLi.length;i++)
{
this.aLi[i].index=i;
//alert(this.aLi[i].index)
this.oP=this.aLi[i].getElementsByTagName('p')[0];
this.oP.times=null;
this.oP.iAlpha=0;
this.aLi[i].onmouseover=function()
{
_this.oP=this.getElementsByTagName('p')[0];
//alert(this.aLi[i])
_this.oP.times && clearInterval(_this.oP.times);
_this.oP.style.opacity=1;
_this.oP.style.filter="alpha(opacity=100)";
_this.oP.iAlpha=100;
};
this.aLi[i].onmouseout=function()
{
_this.startMove(this.getElementsByTagName('p')[0])
};
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
Leave.prototype.startMove=function (obj)
{
obj.times && clearInterval(obj.time);
obj.times=setInterval(function()
{
_this.doMove(obj);
},10);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
Leave.prototype.doMove=function(obj)
{
this.iSpeed=5;
if(obj.iAlpha<=this.iSpeed)
{
clearInterval(obj.times);
obj.iAlpha=0;
obj.time=null;
}
else
{
obj.iAlpha-=this.iSpeed;
}
obj.style.filter="alpha(opacity="+obj.iAlpha+")";
obj.style.opacity=obj.iAlpha/100;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="box_wuming_ren">
<div class="internal">
<h2><strong>今日新闻</strong><a href="javascript:;">more</a></h2>
<ul>
<li>
<p></p>
<div>
<a href="javascript:;">武鸣人一号新闻标题</a>
<span>2011-09-10</span>
</div>
</li>
<li>
<p></p>
<div>
<a href="javascript:;">武鸣人二号新闻标题</a>
<span>2011-09-10</span>
</div>
</li>
<li>
<p></p>
<div>
<a href="javascript:;">武鸣人三号新闻标题</a>
<span>2011-09-10</span>
</div>
</li>
<li>
<p></p>
<div>
<a href="javascript:;">武鸣人四号新闻标题</a>
<span>2011-09-10</span>
</div>
</li>
<li>
<p></p>
<div>
<a href="javascript:;">武鸣人五号新闻标题</a>
<span>2011-09-10</span>
</div>
</li>
<li>
<p></p>
<div>
<a href="javascript:;">武鸣人六号新闻标题</a>
<span>2011-09-10</span>
</div>
</li>
<li>
<p></p>
<div>
<a href="javascript:;">武鸣人七号新闻标题</a>
<span>2011-09-10</span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处