要素にマウスカーソルが乗ったときに適用される擬似クラスです。ボタンやリンクのホバー効果などでよく使われます。
:hover { ... }バリアント hover: を先頭に付けて使います
| hover:bg-red-700 | :hover { background-color: ... } |
v4のhover:は「ホバー可能なデバイス」でのみ有効（@media (hover: hover)内）。タッチデバイスでの疑似ホバー問題が仕様レベルで解決された。
button:hover { background-color: blue; }ボタンホバー時に背景色を変更
a:hover { text-decoration: underline; }リンクホバー時に下線を表示
インタラクションを強調したい要素に使うと効果的。
タッチデバイスでは:activeや:focusも併用推奨。
タッチデバイスでは:hoverがタップ後に貼り付く（sticky hover）ため、素の:hoverだけで書くとスマホで不自然になります。AIはこの配慮を省略しがちで、@media (hover: hover)で「ホバーできる環境だけ」に限定するのが現代の定石です。ホバーでしか到達できない情報を作らない（キーボード・タッチ代替）ことも重要です。
このhoverエフェクトをタッチデバイスで貼り付かないよう@media (hover: hover)でガードして
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。