web-dev-qa-db-ja.com

cssを介してすべてのホバー効果を削除します

タッチデバイスに降りてきたとき、ホバー動作をしたくありません。 Webサイト全体ですべてのホバー効果を一度に無効にすることは可能ですか？

Modernizrを使用してタッチを検出し、クラスを設定するとします。

これは私が思いついたものですが、それは多くの矛盾を与えます：

html.touch *:hover {
    color: inherit !important;
    background: inherit !important;
}

純粋なCSSでこれを行う方法はありますか？そうでない場合は、JavaScriptでどのように行うことができますか？

javascripthtmlcssmodernizr
9
Simon Dragsbæk

これは良いですが、サポートはあまりよくありません：

html.touch *:hover {
    all:unset!important;
}

しかし、これは非常に優れていますサポート：

html.touch *:hover {
    pointer-events: none !important;
}

私にとっては完璧に機能します。ボタンに触れるとすべてのホバー効果が点灯しますが、マウスイベントの最初のホバー効果としてバグが発生することはありません。

14
Simon Dragsbæk

all:unsetまたはall:initialをお試しください

html.touch *:hover {
    all:unset!important;
}

サポートは制限されています（ https://developer.mozilla.org/en-US/docs/Web/CSS/all ）

1
Gabriele Petrioli

キャッチオールソリューションを試みることは、おそらくトリッキーになるでしょう。私はあなたがホバーを定義したあなたのCSSのどこかに変換するでしょう：

.thing:hover {}

modernizrクラスを含めるには：

html.no-touch .thing:hover {}

Modernizrはjavascriptであるため、Modernizrを使用するソリューションは「純粋なCSSソリューション」ではないことに注意する必要があります。

1
rwacarter