今回の記事ではホバー時に変化させるやり方を紹介いたします。

ボタンをホバーした時や、リンク付きのテキストなど変化せせることで、クリックできることがわかりやすいと思います。

このようなテキストがあるとします。

このテキストをホバーした時にテキストの色を変えてクリックできることを強調したいと思います。

やり方

このテキストのクラスを「text」とします。

.text:hover { color: #05BC43;}と指定します。

すると

このようにテキストの色を変えることができます。

続いて背景色とテキストの色を変えます。

.text:hover { color: #fff; background-color: #05BC43;}と指定します。

すると

このようにテキストの色と背景色を変えることができます。