0

この問題の現在の最良の例は次のとおりです。http://lukes.comyr.com/Tf2MarketThing/index.html

Safari では、項目にカーソルを合わせると、webkit 変換である css hover pseudo がアクティブになります。

.item:hover {
    -webkit-transform: scale(1.5) rotate(30deg);
}

ただし、アイテムをクリックすると（jQuery animate（）を介して）移動しますが、マウスがアイテムの上になくてもホバーアニメーション/状態のままであり、ホバー疑似を取り除くために持っていますアイテムが移動した場所に再びカーソルを合わせます。

この問題を修正して、移動後にアイテムが通常の css 状態になるようにする方法はありますか? これらの方法のいずれかが存在する可能性があるかどうか疑問に思っていました:

  • ブラウザーにホバー境界の再計算を強制する
  • 疑似アイテム クラスをリセットまたは削除する
  • ホバー計算をトリガーするマウス移動イベントをシミュレートする

編集：哀れなことに、リンクが過負荷になっているように見えるので、問題を説明するのに役立ついくつかのスクリーンショットを次に示します。

これは、アイテムの上にカーソルを置いたときにどのように見えるかです。他の要素と比較してどのように回転しているかに注意してください

ホバリング

これは、カーソルが元の位置から移動していなくても、ホバー疑似でまだ回転している移動後のアイテムの外観です (ギャップが右上隅にある場合)

まだホバリング

4

1 に答える 1

1

完全な解決策ではありませんが、解決方法を教えてください

$('.item').click(function(){$(this).css('transform','scale(1)')})
$('.item').hover(function(){$(this).css('transform','scale(1.5)')})
$('.item').mouseout(function(){$(this).css('transform','scale(1)')})
于 2013-07-17T05:06:25.123 に答える