none
IE6下css定义异常失效 RRS feed

  • 问题

  •  

    <style type="text/css">
    <!--

    #SLPDemo_playBtn.disable{  width:30px; height:17px; background:url(play_disable.gif) 0 0  no-repeat;}


    #SLPDemo_playBtn.able { width:30px; height:17px; background:url(play_able.gif) 0 0 no-repeat;}

    #SLPDemo_playBtn.over {   width:30px; height:17px; background:url(play_over.gif) 0 0  no-repeat;}


    -->
    </style>

     

    <div id="SLPDemo_playBtn" class="disable"></div>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--

     document.getElementById('SLPDemo_playBtn').onmouseover = function(){
      this.className = 'over';
     }
    //--><!]]>
    </script>

     

    以上功能无法实现

     

    谁能解释下原因?

     

     

    2008年4月22日 10:55

答案

  • CSS 的确没有注释掉,是我粗心。不好意思:)

     

    我在一些邮件列表查了下。出现这个问题是由于 IE7 之前的脚本不支持 W3C 的 addEventListener 而是使用的 attachEvent ,所以虽然 className 成功设置了,但新的 class 并不会对引用它的元素产生效果。

     

    一种不优美但简单的解决办法是:

    Code Snippet

    document.getElementById('SLPDemo_playBtn').onmouseover = function(){
      //this.className = 'over';

      this.style.background = "url(play_over.gif) 0 0  no-repeat";

    }

     

    Hope to help.
    2008年4月23日 4:16

全部回复

  • 可以这样定义

    Code Snippet

     

    .over {   width:30px; height:17px; background:url(play_over.gif) 0 0  no-repeat;}

     

     

    2008年4月22日 11:13
    版主
  • 如果这就是你在页面中的代码的话。那么原因是CSS定义已经被注释掉了,去掉注释。

     

    CSS定义是没有问题的。限定了同时具有定义的id和class的元素才生效。

    2008年4月22日 12:00
  • CSS定义没有被注释掉

    对 CSS定义是没有问题,

    问题出在classname的更改没有生效

     

    firefox、IE7下都没有问题

    就IE6 下有问题

    2008年4月23日 3:49
  • CSS 的确没有注释掉,是我粗心。不好意思:)

     

    我在一些邮件列表查了下。出现这个问题是由于 IE7 之前的脚本不支持 W3C 的 addEventListener 而是使用的 attachEvent ,所以虽然 className 成功设置了,但新的 class 并不会对引用它的元素产生效果。

     

    一种不优美但简单的解决办法是:

    Code Snippet

    document.getElementById('SLPDemo_playBtn').onmouseover = function(){
      //this.className = 'over';

      this.style.background = "url(play_over.gif) 0 0  no-repeat";

    }

     

    Hope to help.
    2008年4月23日 4:16
  • 建议用attachEvent来做这个事件的触发
    2008年5月4日 9:24
  •  

    <style type="text/css">
    <!--

    #SLPDemo_playBtn.disable{  width:30px; height:17px; background:url(play_disable.gif) 0 0  no-repeat;}


    #SLPDemo_playBtn.able { width:30px; height:17px; background:url(play_able.gif) 0 0 no-repeat;}

    #SLPDemo_playBtn.over {   width:40px; height:17px; background: #f00 url(play_over.gif) 0 0  no-repeat;}


    -->
    </style>


     

    <div id="SLPDemo_playBtn" class="disable"></div>
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--

     document.getElementById('SLPDemo_playBtn').attachEvent('onmouseover',function(){this.className = 'over';alert(this.className);});
     
    //--><!]]>
    </script>

     

     

    使用attchevent 绑定事件 仍然不能解决

    2008年5月5日 7:59