tailwindcssで親要素のホバーで子要素を制御したいときのやつ
| HTML/CSS/PHP、TailwindcssTailwindcssを使っててちょっと悩むのは親要素で制御したいときですね。
それの代表格でいうとホバーとかじゃないですかね?
ボタンとかリンクとかのホバーで子要素に変化を与えたいときは
親要素に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が聞いて画像が拡大されるようになりやす。
覚えておいてもいいんじゃないでしょうか