【 tailwindcss 】hover で使える表現まとめ

【 tailwindcss 】hover で使える表現まとめ

Web制作に関することをブログにしました。誰かのお役に立てれば、幸いです。

最近は、tailwindcss を使うことが多いのですが、

:hover させて、少し変化をつけたいときのパターンをまとめておきたかったので、

ブログにしました。

hover について

:hover は、css の疑似クラスになります。

擬似クラスとは、要素が特定の状態になっているときだけに実行されるクラスのことです。

:hover は、カーソルが要素の上に置かれたとき実行されるクラスで、

要素に動きをつけることができるので、変化のあるボタンを作成したり、

画像などが選択されていることをわかりやすくするために使ったりします。

:hover 使用例

下のコード例は、コンポーネント毎に作成した、XXXX.module.css に書いた場合のものです。

背景色と文字色を変える

.button {
  @apply w-auto py-2 px-4 font-medium rounded-md text-indigo-700 bg-transparent border border-indigo-700;
}

.button:hover {
  @apply text-white bg-purple-700;
}

要素を拡大する

.button:hover {
  @apply transform duration-1000 scale-150;
}

duration-1000で変化する時間を変えることができ、scale-150で、拡大する割合を変えられます。 また、scale-x-150のように、x軸方向のみ拡大することも指定できます。

要素を移動させる

.button:hover {
  @apply transform duration-500 -translate-y-5;
}

-translate-y-5は、y軸方向へマイナスの移動をさせていますが、 プラスの移動とx軸の方向への移動も指定できます。

要素の周囲を囲む

.button:hover {
  @apply ring-4;
}

ring-4は、リングの太さ、色、オフセット、opacityなどの指定もできます。

よく使われると思われるものを抜粋しました。 より詳しく知りたい方は、ドキュメントを参考にしてください。

テキストや画像に使うこともできますし、組み合わせたりすることで動きのあるサイトが作成できます。

<参考にしたサイト>

https://tailwindcss.jp/docs/pseudo-class-variants

https://tailwindcss.jp/docs/scale

https://tailwindcss.jp/docs/translate#app

https://tailwindcss.com/docs/ring-width