ios - デスクトップと iPad でのホバー動作

Question

プレーン CSS と:hover疑似クラスを使用してメニューを表示するメニューを作成しました。iPad で動作をテストしたところ、他の場所をクリックしてもホバーが消えないことがわかりました。

インターネットで解決策を既に検索しましたが、役に立つものは見つかりませんでした。

iPad でページの別の場所をクリックしたときにホバーを非表示にする方法はありますか?

Answer 1

私はそれを行う別の方法を知っています（しかし、それがはるかに優れているとは思いませんでした）。

css .hover 効果を有効にするには、要素に空の onclick を追加する必要があります。

<div class="hoverable" onclick="">...</div>

要素をタッチするとホバー効果が機能しますが、長押しすると機能しませんでした。Androidデバイスではテストしていません。ただし、iPad（モバイルクロームとサファリ）で動作します。

PSまた、ユーザーがタッチまたはタッチアンドホールドする可能性のあるすべての要素に、以下のcssスタイルを追加することをお勧めします。

-webkit-user-select: none;

このオプションは、要素の切り取り/コピー/貼り付けダイアログをオフにします。また、すべてのドキュメントに使用しないでください。