栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

js实现鼠标滑过文字链接色彩变化的效果

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js实现鼠标滑过文字链接色彩变化的效果

本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法。分享给大家供大家参考。具体实现方法如下:





鼠标移入移出效果

body,ul,h2,p{
margin:0; padding:0;
font-family:"微软雅黑";
background:#333;
}
li{list-style:none;}
a{text-decoration:none;}
#box{
width:270px;padding:10px 10px 20px;
overflow:hidden;margin:20px auto 0;
border:1px solid #FFF;
}
.internal{width:266px;float:left;}
#box h2{
height:38px;border-bottom:1px solid #ccc;
padding-left:5px;
}
#box h2 strong{
float:left; line-height:38px;
color:#885050;
}
#box 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 li{
height:30px;position:relative;
border-bottom:1px dashed #ccc;
}
#box li div,#box li p{
height:30px;position:absolute;
top:0;left:0;width:100%;
}
#box li p{
background:#fff;opacity:0;
filter:alpha(opacity=0);
}
#box li div a,#box li div span{
line-height:30px;
font-size:12px;height:30px;
}
#box li div a {
float:left;padding-left:5px;
color:#7F5454;width:185px;
overflow:hidden;
}
#box li div span{
padding-right:10px;
float:right;color:#CF9494;
}