求大神帮忙解决js鼠标移入事件

想通过js改变class属性 当鼠标移入时改变图片，css中有"_on"的是改变后的图片  "求大神帮忙~~ 下面是图例.qie1_dt{background:url('../img/qiehuan1.jpg') no-repeat left top;}
.qie1_dt_on{background:url('../img/qiehuan1.jpg') no-repeat -123px top}.qie1_bm{background:url('../img/qiehuan1.jpg') no-repeat left -54px;}
.qie1_bm_on{background:url('../img/qiehuan1.jpg') no-repeat -123px -54px}.qie1_cx{background:url('../img/qiehuan1.jpg') no-repeat left -119px;}
.qie1_cx_on{background:url('../img/qiehuan1.jpg') no-repeat -123px -119px}.qie1_lq{background:url('../img/qiehuan1.jpg') no-repeat left -173px;}
.qie1_lq_on{background:url('../img/qiehuan1.jpg') no-repeat -123px -173px}
<ul class="qiehuan1">
     <li><a href="" class="qie1_dt_on"></a></li>
     <li><a href="" class="qie1_bm"></a></li>
     <li><a href="" class="qie1_cx"></a></li>
     <li><a href="" class="qie1_lq"></a></li>
 </ul>

解决方案 »

  1.   

    <li onmouseover="this.className='qie1_dt_on'" onmouseout="this.className='qie1_dt'"></li>
    这样写试试，这是鼠标的移出和移入事件
      

  2.   

    显示内容，类似于下面的代码$(function(){
        $("#滑过的地方").mouseover(function(){
        $(this).next().show();
    });
    $("#滑过的地方").mouseout(function(){
         $(this).next().hide();
    })
    })
      

  3.   

    何必那么麻烦？用a标签的hover完全可以解决问题，而且相当的轻松加愉快。
      

  4.   


    var a="qie1_dt_on";
    $("ul.qiehuan1 a").mouseover(function(){
        if(/_on$/.exec(this.className)){
           return;
        }else{
           $("ul.qiehuan1 a."+a).attr("className",a.replace(/_on$/,""));
           this.className=this.className+'_on';
        }
    });试试
      

  5.   

    用jquery吧  方便些~~$(function(){
    $('.qiehuan1 li a').hover(function(){
    $('.qiehuan1 li a').each(function(){
    var start=$(this).attr('class').indexOf('_on');
    if(start){
    var newClass=$(this).attr('class').replace(/_on/,'');
    $(this).attr('class',newClass);
    }
    });
    var newClass=$(this).attr('class')+'_on';
    $(this).attr('class',newClass);
    })
    });
      

  6.   

    +1鼠标移出不改变样式 移到其他标签才恢复样式 
    要改变鼠标样式吗？用cursor这个属性控制
      

  7.   

    如果达到你要的效果 其实这不是个问题，但要说清楚，这是个问题
    第一 楼主要对css和js这些前端技术 不要说精通，至少说能够看懂，有自己的思考
    第二 明确下js的鼠标事件触发和css的伪类应用的同与不同所以 按你的需求 鼠标移动到某按钮 该按钮变色 其他按钮还原 css的伪类hover没办法达到你的目的，至于原因可以去百度下css hover的解释所以一般就用JS鼠标事件触发 鼠标事件是针对dom元素的，即把触发事件绑定到元素上，只要鼠标在dom元素上触发绑定的事件，程序就可以执行事件中的代码了 至于绑定方法 可以直接写在dom中，如#1，还可以独立到页面</body>之前，或者用jquery框架 以下是个详细列子
    <style type="text/css">
    ul{ padding:0; margin:0; list-style:none;}
    ul li{ float:left; width:100px; height:40px; margin-right:10px; border:3px solid #FFCC00; background-color:#CCCCCC;}
    ul li.mouseStop{ background-color:#0066CC; color:#FFFFFF; cursor:pointer;}
    </style>
    <ul id="test">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <script language="javascript">
    var father=document.getElementById("test");
    var tempArray=father.getElementsByTagName("li");
    for (var i=0; i<tempArray.length; i++){
    tempArray[i].onmouseover=function(){
    for (var j=0; j<tempArray.length; j++){
    tempArray[j].className="";
    }
    this.className="mouseStop";
    }
    }
    </script>
    //把以上代码放到<body></body>之间没写更多代码注释，希望楼主自己查阅资料后理解
      

  8.   

    这里是格式化的代码，便于大家在这里查看
    CSSul{ padding:0; margin:0; list-style:none;}
    ul li{ float:left; width:100px; height:40px; margin-right:10px; border:3px solid #FFCC00; background-color:#CCCCCC;}
    ul li.mouseStop{ background-color:#0066CC; color:#FFFFFF; cursor:pointer;}
    html<ul id="test">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    javascriptvar father=document.getElementById("test");
    var tempArray=father.getElementsByTagName("li");
    for (var i=0; i<tempArray.length; i++){
        tempArray[i].onmouseover=function(){
            for (var j=0; j<tempArray.length; j++){
                tempArray[j].className="";
            }
            this.className="mouseStop";
        }
    }