追い風群ホバー、逃した状態

ホバー状態は、Web 開発の重要な部分であり、最終的な UI の微調整を行います.

Tailwind を使用している場合は、hover の状態を知っているかもしれませんが、これは驚くべきことですが、サブセレクターは含まれていませんでした.

これは、group-hover クラスが私たちを助けることができるものです!

以下の CodePen で、今日ビルドするものの最終結果を確認できます.

Tailwind グループのホバー効果

まず、この効果がどのように機能するかを見てみましょう.

親要素に group クラスが必要です.
次に、group-hover: クラスを使用して、このグループ要素の子にホバー クラスを追加できます.

内部に 2 つのスパンを持つ div がある、非常に単純なエフェクトを作成してみましょう.ホバーすると、各スパンが独自の色になります.

<div class="group">
  <span class="group-hover:text-yellow-500 text-black">Hello</span>
  <span class="group-hover:text-red-500 text-black">World</span>
</div>

次の CodePen デモで試してみてください.

Tailwind グループ ホバーでホバー カードを作成する

上のデモが示すように、カード ホバー効果を作成する方法を見てみましょう.

これは、Tailwind CSS responsive square divs に関する記事に見られるように、Tailwind スクエア div 効果を使用します.

しかし、必要なものの高レベルの概要をスケッチしましょう.

Div 要素 [親]

- 子要素 [背景黒レイヤー]

- 子要素 [タイトル要素]

これらの 2 つの子要素は、親 div の上にカーソルを置いた場合にのみ表示されます.

基本構造では、次のようになります.

<div
  class="relative group flex justify-center w-1/2 h-0 bg-center bg-cover border-2 border-gray-300 shadow-lg pb-1-2 rounded-xl bg-image"
>
  <div
    class="absolute bg-black w-full h-full rounded-xl bg-opacity-25 opacity-0 group-hover:opacity-100"
  ></div>

  <div
    class="absolute p-6 text-2xl tracking-widest text-white uppercase -translate-y-1/2 bg-black bg-opacity-75 opacity-0 top-1/2 rounded-xl group-hover:opacity-100"
  >
    Tadaa 🎉
  </div>
</div>

これにより、要素の目的の効果とスタイルが得られるため、すべてがうまく整列します.

ただし、この時点ではかなり静的なちらつき効果が得られます.次の 2 つのクラスを子要素に追加して、これを変更しましょう: transform transition-opacity .

これらにより、不透明度の遷移を確実にアニメーション化できます.

黒の背景の div が、幅と高さをすべて使用した絶対配置要素であることに気付いたかもしれません.
テキストレイヤーは div のフルサイズではないため、センターハックを使用します.
このハックは、要素を上から 50% の位置に配置し、y 軸を -50% オフセットして、要素が完全に中央に配置されるようにすることを意味します.

このグループ ホバーは Tailwind 🎉 への素晴らしい追加機能なので、何か新しいことを学んでいただければ幸いです.

読んでいただきありがとうございます。接続しましょう。

私のブログを読んでいただきありがとうございます.メール ニュースレターを購読して、Facebook に接続してください.