ホームページ ウェブフロントエンド CSSチュートリアル タッチ対応デバイスのボタン上のスティッキー ホバー エフェクトを削除するにはどうすればよいですか?

タッチ対応デバイスのボタン上のスティッキー ホバー エフェクトを削除するにはどうすればよいですか?

Nov 11, 2024 pm 04:58 PM

How to Eliminate Sticky Hover Effects on Buttons for Touch-Enabled Devices?

タッチ対応デバイスのボタン上のスティッキー ホバー効果を削除する方法

永続的なナビゲーション ボタンを使用してカルーセルを作成する場合、一般的な問題が発生します。タッチデバイス。ボタンのホバー状態は通常青色で表示されますが、「スティッキー」になり、タップした後でもアクティブなままになります。この問題に対処するためのいくつかのアプローチが検討されています。

  • タッチエンドにホバーなしクラスを追加すると問題は解決できますが、パフォーマンスに影響を与え、タッチとマウスの両方を備えた Chromebook などのデバイスで互換性の問題が発生する可能性があります。
  • documentElement にタッチ クラスを実装し、それに応じて CSS を変更することでも問題に対処できますが、タッチとマウスの両方を備えたデバイスには最適ではありません。 support.

理想的な解決策は、タッチエンド時にホバー状態を削除することです。ただし、これを直接行う方法はありません。別の要素にフォーカスしてもホバー状態は解除されません。別の要素を手動でタップすることは可能ですが、JavaScript でこのアクションをプログラムでトリガーすることは依然として課題です。

この問題を効果的に解決するには、CSS メディア クエリ レベル 4 の最近の開発を活用できます。

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}
ログイン後にコピー

この CSS は基本的に、「デバイスが真のホバリングをサポートしている場合 (たとえば、マウスのようなプライマリ入力デバイスがある場合)、ボタンのホバリングを適用します」と述べています。 style."

この機能がまだ実装されていないブラウザの場合、JavaScript ポリフィルを利用してホバー サポートを検出し、カスタム クラスを切り替えて、条件付きでホバー スタイルを適用できます。

html.my-true-hover button:hover {
    background-color: blue;
}
ログイン後にコピー
$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});
ログイン後にコピー

このソリューションは、マウス入力を使用するデバイスで必要な美観を維持しながら、タッチ デバイスのスティッキーなホバー効果を効果的に排除します。

以上がタッチ対応デバイスのボタン上のスティッキー ホバー エフェクトを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法 Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

HTMLデータ属性ガイド HTMLデータ属性ガイド Apr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

SASSをより速くするための概念の証明 SASSをより速くするための概念の証明 Apr 16, 2025 am 10:38 AM

新しいプロジェクトの開始時に、SASSコンピレーションは瞬く間に起こります。これは、特にbrowsersyncとペアになっている場合は素晴らしい気分です。

あなたが見ている間、CSSグラデーションは良くなりました あなたが見ている間、CSSグラデーションは良くなりました Apr 11, 2025 am 09:16 AM

Lea verou' conic-gradient()Polyfillの機能のリストに目を向けたことの1つが最後の項目でした。

WordPressテーマでVueコンポーネントを構築する方法 WordPressテーマでVueコンポーネントを構築する方法 Apr 11, 2025 am 11:03 AM

インラインテンプレートディレクティブにより、既存のWordPressマークアップに対する進行性の強化として、リッチVUEコンポーネントを構築できます。

静的フォームプロバイダーの比較 静的フォームプロバイダーの比較 Apr 16, 2025 am 11:20 AM

ここでは、「静的フォームプロバイダー」という用語を埋めてみましょう。あなたはあなたのHTMLを持ってきます

PHPはテンプレートのA-OKです PHPはテンプレートのA-OKです Apr 11, 2025 am 11:04 AM

PHPテンプレートは、多くの場合、サブパーコードを促進するために悪いラップを取得しますが、そうである必要はありません。 PHPプロジェクトが基本を実施する方法を見てみましょう

3種類のコード 3種類のコード Apr 11, 2025 pm 12:02 PM

新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います

See all articles