求大神帮忙解决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>
[解决办法]
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';
}
});
试试
[解决办法]
用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);
})
});
[解决办法]
如果达到你要的效果 其实这不是个问题，但要说清楚，这是个问题
第一 楼主要对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>之间
没写更多代码注释，希望楼主自己查阅资料后理解