Tailwind CSS 練習問題 37：Tailwindの構造的バリアント：親要素ホバー連動
親要素にマウスを乗せたとき、その内部にある子要素（テキストなど）の色だけを変化させたい場合、親要素と子要素に付与する正しいクラスの組み合わせはどれか。
- 親要素に`group`、子要素に`group-hover:text-blue-500`
- 親要素に`peer`、子要素に`peer-hover:text-blue-500`
- 親要素に`hover`、子要素に`hover:text-blue-500`
- 親要素に`parent`、子要素に`parent-hover:text-blue-500`
- 親要素に`group-hover`、子要素に`group:text-blue-500`
正解と解説を見る
正解：親要素に`group`、子要素に`group-hover:text-blue-500`
親要素のホバー状態に応じて内部の子要素のスタイルを変化させるには、親要素に`group`クラスを付け、子要素に`group-hover:`（＝親要素がホバーされたときだけ適用される、という意味の接頭辞）を付けたクラスを指定します。
【正解の理由】
`group`は特定のスタイルを持たない目印用クラスで、これを付けた要素の子孫は`group-hover:`接頭辞を使って親の状態を参照できるようになります。
【不正解の理由】
• 「peer」「peer-hover」の組み合わせ：これは兄弟要素同士の状態連動に使うもので、親子関係のホバー連動には使えない
• 「hover」「hover:text-blue-500」の組み合わせ：`hover`という目印クラスは存在せず、子要素自身がホバーされた場合にしか反応しない
• 「parent」「parent-hover:text-blue-500」の組み合わせ：`parent`というクラス名はTailwindに存在しない
• 「group-hover」「group:text-blue-500」の組み合わせ：目印クラスと状態接頭辞の役割が逆になっており、この指定では機能しない