Zenn
🐡

【Tailwind CSS】親要素hover時に子要素に何かやらせたい

2021/05/15に公開
Tailwind CSS
tech

例えば、WEBサイト上の設定アイコンで時々見かける三点ドットリーダー。
Twitterの各ツイート欄やYahooニュースのコメント欄などの右上に表示される↓赤枠のこれです。

これをTailWind CSSで、hoverされた時にのみ表示したいケースがありました。

実装したいこと

親要素がhoverされた時に、右上に子要素である三点ドットリーダーを表示します。

イメージ

実装結果

以下のように実装しました。

<div class="container mx-auto m-2 p-2 group relative border border-indigo-500 hover:bg-indigo-50 hover:shadow-md">
  <p class="text-indigo-600 group-hover:text-gray-900 py-4">Comments</p>
  <!-- 三点ドットリーダー ※heroiconsより(https://heroicons.com/) -->
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-0 group-hover:opacity-40 absolute top-1 right-2 cursor-pointer" viewBox="0 0 20 20" fill="currentColor">
    <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
  </svg>
</div>

挙動

サンプル

https://play.tailwindcss.com/rshFrODc8L

ポイントは親要素にgroupを、子要素にgroup-hover:を組み込むことです。
こちらを参考にしてください↓
https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover

以上です。

Discussion