页面加载执行脚本问题，click之后失效，期待大虾解决

<!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 id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
input{ width:100%; height:35px; border:0px; background-image:url(images/111.jpg);}
.btnTopOver{ background-image:url(images/222.jpg);}
.btnTopOut{ background-image:url(images/111.jpg);}
-->
</style></head><body>
<form runat="server" id="form1">
<div id="divIndexTop" style="width:177px;">
        <input id="Button1" type="button" value="基础信息" />
        <input id="Button2" type="button" value="初始化管理" />
        <input id="Button3" type="button" value="进货管理" />
       <input id="Button4" type="button" value="销售管理" />
      <input id="Button5" type="button" value="维修管理" />
     <input id="Button6" type="button" value="库存管理" />
      <input id="Button7" type="button" value="现金管理" />
      <input id="Button8" type="button" value="系统管理" />
        <input id="Button9" type="button" value="退出" />
</div>
</form>
</body>
</html>
<script src="../js/jquery.js" type="text/javascript"></script>
    <script>
    $(function() {
            $("input").click(function() {
                $("input").attr("style", "background-image:url(images/111.jpg)");
                $(this).attr("style", "background-image:url(images/333.jpg)");
            });
        });
    </script>
    <script>
         var btns=document.getElementById("divIndexTop").getElementsByTagName("input");
            for(var i=0;i<btns.length;i++){
                 //触发onMouseOver事件时
                btns[i].onmouseover=function ()
                {
                     this.className="btnTopOver";
                };
                //触发onMouseOut事件时
                btns[i].onmouseout=function ()
                {
                    this.className="btnTopOut";
                };
            }    </script>
加载进来执行onmouseover和onmouseout就有效果
操作BUTTON的click事件之后，onmouseover和onmouseout就失效。
期待大虾们解决。

解决方案 »

  1.   

    下面那个script里代码改成：            $("#divIndexTop input").hover(function() {
                    this.className="btnTopOver"; 
                },function() {
                   this.className="btnTopOut"; 
                });
      

  2.   

    还是一样。
    click之后就失效了。
      

  3.   


    $("input").click(function() {
        $("input").css("background-image","url(images/111.jpg)");
         $(this).css("background-image","url(images/333.jpg)"); 
    });
      

  4.   

    因为你直接使用css或者style会使用内联样式表，而class是外联的style里的内容会优先解析 
      

  5.   

     $("input").click(function() {
                    $("input").css("background-image","url(images/111.jpg)");
                     $(this).css("background-image","url(images/333.jpg)"); 
                });             $("#divIndexTop input").hover(function() {
                     $("input").css("background-image","url(images/222.jpg)");
                },function() {
                  $("input").css("background-image","url(images/111.jpg)");
                });
    我改成这样就对应的是全部BUTTON都执行了onmouseover和onmoseout了.
    初学JQUERY 其实javascript也是不太会。
    3Q，再帮忙瞧瞧。
      

  6.   


    $("input").click(function() { 
                    $("input").css("background-image","url(images/111.jpg)"); 
                    $(this).css("background-image","url(images/333.jpg)"); 
                });             $("#divIndexTop input").hover(function() { 
                    $(this).css("background-image","url(images/222.jpg)"); 
                },function() { 
                  $(this).css("background-image","url(images/111.jpg)"); 
                }); 
      

  7.   

    这样的话CLICK不行了。也不是不行了
    我先说下我要实现的功能。
    当我点击一个BUTTON的时候，这个BUTTON（取名为1好了。）的背景变一下，但是我把鼠标移动到其他BUTTON上，1的背景就执行了onmouseout事件了，1的背景就跟着改变了。我是鼠标移动到其他BUTTON的时候，1的背景色也不能变，直到点击其他BUTTON的时候1的背景才变回去。不知道这样的功能是否可以同时满足。。