-2

我有这段代码，但它不起作用；我不知道为什么。我在所有浏览器（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>

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

4

3 回答 3

2

您的 jQuery 代码正在运行，但您的 CSS 不起作用，因为ofbackground-color没有.botoncla覆盖background-color.#boton

试试这个：

.botoncla
{
    background-color:#FF0000 !important;
}

编辑

但是在你的情况下，!important是一个黑客......也许你应该.animate()改用：

$(this).animate({ backgroundColor: "FF0000" }, "slow");
于 2012-08-04T12:00:41.137 回答
2

你可以试试这个

#boton.botoncla {
background-color:#FF0000;
}
于 2012-08-04T12:06:54.230 回答
1

这里有一些问题。首先，您包括两次 jQuery，以及 jQuery UI（未使用）。这两个 jQuery 版本也不同，如latest构建1.7.2。删除其中一个（可能是 v1.4）。

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

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

于 2012-08-04T12:06:08.960 回答