Question

我有这个代码，它不起作用;我不知道为什么。我在所有浏览器（IE，Chrome，firefox）中都尝试过它。我想系统必须添加类，我尝试使用chrome控制台来查看DOM。我看到了添加的类，但在chrome或其他浏览器中没有变化。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <style>
      #boton
      {
        width:200px;
        height:30px;
        border:1px solid;
        background-color:#cccccc;
      }


    </style>

    <style>
      .botoncla
      {
        background-color:#FF0000;
      }
    </style>


    <script>



    $(document).ready(function(){
      $("#boton").hover(function(){
        $(this).addClass("botoncla");
      }, function(){
        $(this).removeClass("botoncla");
     });
    });

    </script>
    </head>

    <body>
       <div id="boton">Hello</div>
    </body>

</html>

有人可以测试一下吗？它对我不起作用。

Answer 1

您的jQuery代码正常运行，但您的CSS无效，因为background-color的{{1}}并未覆盖.botoncla的{{1}}。

试试这个：

background-color

修改

但是在你的情况下，#boton是一个黑客......也许你应该使用.botoncla { background-color:#FF0000 !important; }代替：

!important

Answer 2

你可以试试这个，

#boton.botoncla {
background-color:#FF0000;
}

Answer 3

这里有一些问题。首先，你包括两次jQuery和jQuery UI（未使用）。两个jQuery版本也不同，因为latest指的是1.7.2版本。删除其中一个（可能是v1.4）。

它不应用.botoncla样式的原因是因为ID总是具有比类更高的特异性，这意味着来自#boton的样式被认为更重要。您可以在声明中添加!important，或者更好的是，使其更加具体，如下所示：#boton.botoncla

请参阅我的jsFiddle：http://jsfiddle.net/TheNix/rvUtT/

Jquery Addclass不起作用

3 个答案: