BLOG

tailwindcssで親要素のホバーで子要素を制御したいときのやつ

| HTML/CSS/PHPTailwindcss

Tailwindcssを使っててちょっと悩むのは親要素で制御したいときですね。
それの代表格でいうとホバーとかじゃないですかね?
ボタンとかリンクとかのホバーで子要素に変化を与えたいときは
親要素にgroupクラスのマークを付けて、子要素にgroup-*接頭辞クラスを使うことで
親要素の状態で変化するようにできます。

<a href="/" class="group">
  <figure class="overflow-hidden">
    <img src="" alt="" class="transition transtion-all group-hover:scale-110">
  </figure>
  <div class="">テキストが入ります。</div>
</a>

こんな感じで書いてあげたら、親要素をホバーしたらscaleが聞いて画像が拡大されるようになりやす。
覚えておいてもいいんじゃないでしょうか

PAGE TOP