エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Tailwind CSS の hover: を、非活性な要素やタッチ操作に適用させない ~ addVariant の活用
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Tailwind CSS の hover: を、非活性な要素やタッチ操作に適用させない ~ addVariant の活用
背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いて... 背景 以前公開した記事で、単純な :hover セレクタの問題点を書きました。 詳しくは上記の記事に書いていますが、要約すると問題は大きく以下の 2 点です。 スマホなどのタッチデバイスでもホバースタイルが適用されてしまう disabled 状態の button など、クリックしても反応しない要素にもホバースタイルが適用されてしまう これらの問題が次のようなメディアクエリと疑似クラスを組み合わせたスタイル記述によって解決できることを紹介しました。 @media (hover: hover) { .class:where(:any-link, :enabled, summary):hover { /* ホバースタイル */ } } 今回はこれを Tailwind CSS で実現するには? という記事です。 確認した環境 Tailwind CSS v3.4.1 Tailwind CSS におけ