-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

あなたはこれを試すことができます、

#boton.botoncla {
background-color:#FF0000;
}
于 2012-08-04T12:06:54.230 に答える
2

jQuery コードは機能していますが、 of が of を上書きしないため、CSS は機能background-colorしませ.botonclaん。background-color#boton

これを試してください：

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

編集

ただし、あなたの場合!importantはハックです....animate()代わりに使用する必要があるかもしれません:

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

ここにはいくつか問題があります。まず、jQuery を 2 回組み込み、jQuery UI (これは使用しません) を組み込みます。ビルドをlatest参照すると、2 つの jQuery バージョンも異なります。1.7.2それらの1つを削除します（おそらくv1.4）。

からのスタイリングを適用しない理由.botonclaは、ID は常にクラスよりも特異性が高いためです。つまり、からのスタイリング#botonがより重要であると見なされます。宣言に を追加するか、次の!importantようにより具体的にすることができます。#boton.botoncla

私の jsFiddle を参照してください: http://jsfiddle.net/TheNix/rvUtT/

于 2012-08-04T12:06:08.960 に答える