求大神帮忙解决js鼠标移入事件,该如何处理

2013-08-04

求大神帮忙解决js鼠标移入事件想通过js改变class属性当鼠标移入时改变图片，css中有_on的是改变后的图片

求大神帮忙解决js鼠标移入事件
想通过js改变class属性当鼠标移入时改变图片，css中有"_on"的是改变后的图片 "求大神帮忙~~

下面是图例

求大神帮忙解决js鼠标移入事件,该如何处理


.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>之间

没写更多代码注释，希望楼主自己查阅资料后理解

热点排行

JavaScript

求大神帮忙解决js鼠标移入事件,该如何处理