javascript控制鼠标滑过改变按钮颜色

2009-06-27 09:14:11 | 【大中小】

本程序通过onMouseOver事件，当鼠标滑过按钮时改变按钮的颜色，当鼠标移开时，按钮恢复原来的颜色

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sharejs.com 鼠标滑过按钮变色</title>
<style>
body{background-color:151E23}
#divIndexTop{width:100%;height:40px; position:absolute;}
.btnTop{border-width:0px;width:80px;height:25px; margin:0px; padding:0px;color:#666666;}
.btnTopOut{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;}
.btnTopOver{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;cursor:hand;font-weight:bold; background-color:#FFFFFF;}
</style>
</head>

<body>
<div id="divIndexTop" style="text-align:center; z-index:-1">
<input type="button" class="btnTop" value="首页">
<input type="button" class="btnTop" value="商品展示">
<input type="button" class="btnTop" value="站内新闻">
<input type="button" class="btnTop" value="在线聊天">
<input type="button" class="btnTop" value="留言簿">
<input type="button" class="btnTop" value="后台管理">
</div>
<script>

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
    
var btns=document.getElementById("divIndexTop").getElementsByTagName("input");
    //触发onMouseOver事件时
    for(var i=0;i<btns.length;i++){
    btns[i].onmouseover=function ()
    {
        this.className="btnTopOver";
        this.style.color="#000000";
    };
    //触发onMouseOut事件时
    btns[i].onmouseout=function ()
    {
        this.className="btnTopOut";
        this.style.color="#666666";
    };
    }
</script>
</body>
</html>

推荐给朋友

上一篇： JavaScript 复选框操作技巧
下一篇：仿迅雷影视频道Flash图片切换效果

javascript控制鼠标滑过改变按钮颜色

相关资源