关于js控制变色问题

现在有几个div,例如
<div class="css1"></div><div class="css2"></div><div class="css3"></div>
3个风格的div，我想实现鼠标指上去他们的风格变成css4的风格，然后鼠标移出的时候变回原来的风格。现在用onmouseover实现变风格的功能，但是怎么实现移出的时候判断原来是什么风格呢divcssjsjavascriptclass

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

onmouseout = function(){
    var classes = this.className;
    classes = classes.split(' ');
    var len = classes.length,i=len-1;
    for(;i>=0;i--){
        if(classes[i]=='css4'){
            classes.splice(i,1);
        }
    }
    this.className = classes.join(' ');
}应该可以满足所有需求了吧。。
你得把前面加上选择器啊，，亲。。我这么写是为了方便你理解。。
<div id="container">
    <div class="css1">111</div>
    <div class="css2">222</div>
    <div class="css3">333</div>
</div>
<script type="text/javascript">
window.onload = function(){
    var container = document.getElementById('container');
    var divs = container.getElementsByTagName('div');
    var len = divs.length;
    for(var i=0;i<len;i++){
        divs[i].onmouseout = function(){
            var classes = this.className;
            classes = classes.split(' ');
            var len = classes.length,i=len-1;
            for(;i>=0;i--){
                if(classes[i]=='css4'){
                    classes.splice(i,1);
                }
            }
            this.className = classes.join(' ');
        }
        divs[i].onmouseover= function(){
            this.className += ' css4';
        }
    }
}
</script>
用jquery的方法实现，很方便：<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $(".css1,.css2,.css3").mouseover(function(e) {
        $(this).addClass("css4")
    }).mouseout(function(e) {
        $(this).removeClass("css4")
    });;
});
</script>
<style type="text/css">
.css1 {
background-color: #CCC;
}
.css2 {
background-color: #abc;
}
.css3 {
background-color: #cba;
}
.css4 {
background-color: #bac;
}
div {width:300px;height:100px}
</style>
</head><body>
<div class="css1">此处显示  id "div1" 的内容</div>
<div class="css2">此处显示  id "div1" 的内容</div>
<div class="css3">此处显示  id "div1" 的内容</div>
</body>
</html>
顶一个临时变量，over的时候记下原来的class，out的时候还原