遇到一件很奇怪的事情，javascript

本帖最后由 kobecsb 于 2013-04-19 20:30:34 编辑

解决方案 »

  1.   

    你在css里面加入javascript代码？这会不识别吧，虽然改过去了，可是会在被解析的时候忽略掉的。.edit{
    background:red;
    }
    .edit:hover{
    background:yellow;
    }
    .spanStyle{
    background:AliceBlue;
    }
    .spanStyle:hover{
    background:yellow;
    }把css改成这样试试，是不是你要的效果。
      

  2.   

    样式表里没有见过这么写的；
    js效果可以单独写js实现
      

  3.   

      .edit {
                    background:red;
        onmouseout: expression(onmouseout=function (){this.style.backgroundColor = 'red'}); 
        onmouseover: expression(onmouseover=function (){this.style.backgroundColor ='yellow'});
       }
       .spanStyle{
        onmouseout: expression(onmouseout=function (){this.style.backgroundColor ='AliceBlue'}); 
        onmouseover: expression(onmouseover=function (){this.style.backgroundColor ='yellow'});
       }不要在CSS里面写JS，把它去掉应该就可以了。
      

  4.   

    我的理解是这样的：css样式中，style里的样式比class的要优先，当你想通过改变class来改样式的时候，只要和style冲突，都不会现实该class的样式的。不知道对不对
      

  5.   

    反而是onmouseout和onmouseover可以实现，第一句的background:red无法实现
      

  6.   

    样式和js 分开，方便以后的维护，试试这种方法：
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css">
    body,div{ margin:0px; padding:0px; }
    .edit{width:200px; height:200px; background:red;}
    .spanStyle{ background:AliceBlue}
    </style>
    <script>
    function addColor(){
    var edit = document.getElementById("editOne");

    edit.className="edit";
    edit.className= edit.className + ' spanStyle';
    }
    function delColor(){
    var edit = document.getElementById("editOne");
    edit.className = "edit";
    }
    </script>
    </head>
     
    <body>
    <div class="edit" id="editOne" onmouseover="addColor()" onmouseout="delColor()">看我的变化</div>
    </body>
    </html>