css - CSS3 ドロップダウン メニューのホバーが機能しない

Question

私のウェブサイトは純粋な CSS3 ドロップダウン メニューを使用しています。問題は、Web サイトがタッチ スクリーン デバイスで表示されているときに、ホバー プロパティを持つメニュー項目の一部が自動的にドロップダウンしないことです。

メニュー項目にホバードロップダウンがある場合、タッチスクリーンデバイスでタッチする必要がある場合、PCの他の場所にメニューがドロップダウンし、ホバー効果が残るように変更するにはどうすればよいですか。

CSSだけでできますか？

Answer 1

aria-haspopupタッチ対応デバイスでホバーをシミュレートするために使用してみましたか

この記事を見てください。

メニューなどのページ要素で、要素の aria-haspopup プロパティを「true」に設定します。タッチ対応デバイスの Internet Explorer 10 ユーザーが最初にページ要素をタップしたときのユーザー エクスペリエンスは、要素の上にカーソルを置いたユーザーのエクスペリエンスと同じです。

ただし、これに対するブラウザのサポートがどのようなものかはわかりません。

Answer 2

「ホバー」は、マウスポインターが必要なため、実際にはタッチスクリーンの機能ではありません。タッチスクリーンをサポートする優れたライブラリを使用している場合は、それも機能するはずです。そうでない場合は、別のライブラリを試すか、独自のものを作成してください。