0

私は一連のdivを持っています。ホバーするとオリーブ色である必要があり、クリックすると赤のままである必要があります（赤いdivをクリックすると白に戻る必要があります）。div がクリックされたときに、div を「選択」する (selected という新しいクラスを導入する) 必要があります。

問題は、すべてが正常に機能することですが、クリックした直後に div にカーソルを合わせると、ホバーはまだ効果があるようです。これが私のコードです

$(document).ready(function () {

    $("div.onemovie").not("select").hover(
  function () {
          $(this).css("background-color", "Olive");

  },
  function () {
          $(this).css("background-color", "White");
      }

  );
});

クリックコード:

 $(document).ready(function () {
  $("div.onemovie").toggle(
  function () {
      $(this).toggleClass("select");
      $(this).css("background-color", "Red");
  },

  function () {
      $(this).toggleClass("select");
      $(this).css("background-color", "White");
  }
  );

});

ここに私の状況の JS Fiddle リンクがあります: http://jsfiddle.net/mNsfL/

4

3 に答える 3

2

このバージョンはあなたが望むことをしますか?

http://jsfiddle.net/X7HbY/7/

ホバー効果に CSS を使用するだけで、より簡単に目的を達成できると思います。

また、背景色を白に戻す必要はありません。ルールが適用されなくなると、 はdiv以前の設定に戻ります。

于 2012-04-19T05:32:28.573 に答える
1

これを行うための最良の方法は、各イベントをバインドし、マウスオーバー イベント中にdivクリックされた場合にマウスアウト イベントがバインド解除されるようにすることです。

これにより、mouseout コードが実行されなくなりdiv、色の変更が保持されます。

jQuery 1.7+ を使用している場合は、 を使用on()してイベントoff()をバインドし、バインドを解除する必要があります。

于 2012-04-19T05:24:36.690 に答える
1 
$("div.onemovie").bind('click', function(){
    $(this).css("background-color", "White");
})
.bind('mouseover', function() {
    $(this).css("background-color", "Red");
})

各イベントをリッスンして個別に処理しても問題ありません。

于 2012-04-19T05:27:09.817 に答える