ホームページ >ウェブフロントエンド >CSSチュートリアル >タッチ デバイスのボタンのスティッキー ホバー エフェクトを防ぐにはどうすればよいですか?
タッチ デバイスのボタンに対するスティッキー ホバー効果の防止
デスクトップとタッチ対応デバイスの両方のユーザー インターフェイスを作成する場合は、次の点に対処することが重要ですボタン上のスティッキーホバーエフェクトの問題。タッチ デバイスでは、通常要素の背景色の変更によって示されるホバー状態が、ボタンを放した後でも動かなくなることがあります。
スティッキー ホバー効果を防ぐ解決策
これに対処するためにいくつかの解決策が提案されています問題:
推奨される解決策
理想的な解決策は、タッチエンドのホバー状態を削除することです。ただし、これは、別の要素にフォーカスしたり、JavaScript で手動タップをトリガーしたりするなどの従来の方法では実現できないようです。
メディア クエリ レベル 4 ソリューション
しかし、CSS の実装が普及したことで、 2018 年以降のメディア クエリ レベル 4、より洗練されたソリューションがありますavailable:
@media (hover: hover) { button:hover { background-color: blue; } }
この CSS ルールは、ブラウザーが真のホバーリング (通常はマウスのような主入力デバイスの使用を示す) をサポートする場合、ホバー スタイルがボタンに適用されることを示します。これにより、タッチ対応デバイスでのホバー効果が効果的に防止されます。
レガシー ブラウザ用のポリフィル
CSS メディア クエリ レベル 4 をサポートしていないブラウザの場合、ポリフィルは同様のソリューションを実装するために使用されます:
html.my-true-hover button:hover { background-color: blue; }
ポリフィルからの JavaScript コードを切り替えることができますホバリング サポートに基づく my-true-hover クラス:
$(document).on('mq4hsChange', function (e) { $(document.documentElement).toggleClass('my-true-hover', e.trueHover); });
このソリューションを使用すると、開発者は、タッチ対応デバイスでのスティッキー ホバー効果を防止しながら、デスクトップ ブラウザでボタンに適切なホバー効果を確実に与えることができます。
以上がタッチ デバイスのボタンのスティッキー ホバー エフェクトを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。