BinaryDevelop
  1. ホーム
  2. ipad

[解決済み] iPhone/iPadユーザー向けに:hover擬似クラスを強制的に無視させることは可能ですか？

2023-01-26 18:06:27

質問

私のサイトには、いくつかのCSSメニューがあります。 :hover (で展開されます（jsなし）。

これは iDevice では半破壊で動作します。例えば、タップすると :hover ルールが有効になってメニューが展開されますが、その後他の場所をタップしても :hover . また、要素内にリンクがある場合、そのリンクが :hover になっている要素の中にリンクがある場合、リンクを有効にするには 2 回タップする必要があります (1 回目のタップで :hover が表示され、2回目のタップでリンクが表示されます）。

をバインドすることで、iphoneでもうまく動作させることができました。 touchstart イベントをバインドすることで、iPhoneでもうまく動作させることができました。

問題は、モバイル版サファリがまだ :hover ルールを起動するように選択することがあります。 ではなく の代わりに touchstart イベントの代わりに

これが問題であることは、すべての :hover ルールをすべて手動で無効にすると、モバイルサファリがうまく機能するからです（しかし、通常のブラウザでは明らかに機能しなくなります）。

動的に "cancel" する方法はありますか。 :hover のルールを設定する方法はありますか？

iOSの動作はこちらで確認・比較してください。 http://jsfiddle.net/74s35/3/ 注意: 2 クリックの動作を引き起こすのは一部の css プロパティだけです。たとえば display:none; ですが background: red; や text-decoration: underline はトリガーしません。

どのように解決するのですか？

iPhone/iPad の Safari で、":hover" が予測できないことがわかりました。要素をタップすると、その要素が ":hover" になることもあれば、他の要素に移動することもあります。

とりあえず、bodyに"no-touch"クラスだけ置いています。 

<body class="yui3-skin-sam no-touch">
   ...
</body>

そして、":hover"を持つすべてのCSSルールを".no-touch"の下に持っています。 

.no-touch my:hover{
   color: red;
}

ページ内のどこかで、javascriptで ノータッチ クラスを削除するjavascriptを記述しています。 

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

これは完璧には見えませんが、とにかく動きます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します