iframe を使用してコンテンツのブロックをページに積み重ねるコンテンツ管理ツールがあります。システムは、各ブロックのコンテンツを iframe にロードし、表紙と編集機能 (編集、削除、コピー、移動) 用のいくつかのボタンも一緒にロードします。カバーは (CSS :hover 疑似クラスを使用して) マウスオーバーでのみ表示されるため、ページのコンテンツは、ユーザーが編集したいブロックの上にマウスを置いた場合を除いて、ライブとまったく同じように見えます。これはすべてうまくいきます。
問題は、ブロックを移動することです。ブロックを移動するためのドラッグ アンド ドロップ システムを開発しました。ユーザーは移動アイコンをマウスダウンし、ブロックを必要な場所にドラッグします。マウスダウンすると、ブロック自体 (iframe 全体) が非表示になり (display:none)、同じ形状のシャドウ div に置き換えられ、ドラッグされます。ユーザーがブロックを新しい場所にドロップすることを選択した場合、すべてが正常に機能しますが、別の場所にドロップすると、操作はキャンセルされます。シャドウが破棄され、元の iframe が再表示されます。
ここで問題: 元の iframe が再表示されると、マウスがその上に置かれていると考えられ、:hover 擬似クラスの下にのみ表示されるすべてのレイヤーが表示されます (FireFox および IE では - Chrome では表示されません)。 . マウスをブロックの上に移動してから再び外に出すと、iframe の状態がリセットされますが、ユーザーが何もしなくても iframe に強制的にマウスの位置を再評価させる方法を探しています。
1 つの解決策は、疑似クラスの使用をマウス イベントと指定されたクラスに置き換えることですが、他の解決策があるかどうか疑問に思っています。