HTML5 でブラウザ クライアント領域に要素をドラッグしているときに、カーソルを任意のカーソルに変更するにはどうすればよいですか?
これまでのところ、ドラッグ中にデフォルトのカーソルを表示することしかできませんでした (ドロップがサポートされていない場合はカーソルなしを除く)。
私が話しているのは、以下のいずれについてもではありません。
event.dataTransfer.setDragImage()
カーソルの横に画像を表示するために使用するevent.dataTransfer.dropEffect
カーソルの横にコピーまたはリンクのシンボルを表示したり、カーソルをなしのシンボルに変更したりするには、を使用します。Firefox では、 を使用します
event.dataTransfer.mozCursor
。これは、デフォルトのシステム動作を実行するか、矢印カーソルを表示することしかできないため、どちらも役に立ちません (また、主に Chrome をターゲットにしていますが、クロスブラウザのサポートが必要です)。
:hover
CSSやの使用:focus
、JavaSscript のトリックなど、他の多くのトリックも試しましたが、すべて効果がありませんでした。
ご協力いただきありがとうございます。
ベストアンサー1
CSS のみのソリューションはこちらです!
element:hover:active {
cursor: type;
}
要素セレクターを要素がある場所に配置し、カーソルを指定するだけです。これはちょっとしたハックです。ドラッグは検出されず、ホバーとクリックが同時に検出されるだけだからです。