javascript - css-applied hover-style をクリック時に非アクティブ化し、マウスが n px 移動したときに再適用する

Question

次のように、ホバーに応じて変化する2つの異なる背景画像があります。

.klass          {background: url(a.jpg);}
.klass:hover    {background: url(b.jpg);}

css で適用されたホバー スタイルをクリックして非アクティブ化 (つまり、b.jpg の表示を停止) し、マウスが 5px など移動するまでスタイルを再適用しないことは可能ですか?

Answer 1

別のクラスを追加します。

.klass, .klass-clicked {background: url(a.jpg);}
.klass:hover    {background: url(b.jpg);}

その後、クリック ハンドラーは要素のクラスを に変更できますklass-clicked。mousemove次に、マウスが 5px 移動したかどうかをチェックするハンドラーをバインドし、クラスを に戻しklassます。

Answer 2

オブジェクトをホバリングするときは window.myMouseTracker を true に設定し、unhover 関数が完了すると false に設定します。最初は設定されていませんが、要素がホバーされるまでカスタム関数を呼び出さない未定義です。

// global mouse tracking
jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      if (window.myMouseTracker)
      {
          // call to your tracking function
      }
   }); 
})