ホバー時に背景色が切り替わる・反転するリンクのCSS

See the Pen ホバーで文字と背景が変化 by チータツ＠ブログについて語る (@cheese_fuji) on CodePen.

CSSの解説

コードを見る

HTML

<a href="#">背景と文字色が変化</a>

CSS

a{
  transition: .3s;
  text-decoration: none;
}
a:hover{
  color: white;
  background: #003775;
  color: #fff;
}

ホバー時に文字色 color を白、背景色 background-color を青色に変更します。

transition を調整することで、色の移り変わる速度を調整できます。

背景色の切り替えは、主にヘッダーメニューで使用されるデザインです。ここではヘッダーメニューなどで使えそうな汎用性の高いCSSをいくつか紹介します。

白ヘッダーとの相性が良く、メディアサイトなどでも頻繁に見かけるデザインです。

See the Pen Untitled by チータツ＠ブログについて語る (@cheese_fuji) on CodePen.

ブログなどでたまに見かけるデザイン。ヘッダーのサブメニュー（展開後の階層）などで使えます。

背景色の変化よりも下線の伸びを少し遅くするのがミソです。

See the Pen 背景切り替え＋下線のリンク by チータツ＠ブログについて語る (@cheese_fuji) on CodePen.

ホバー時の背景をグラデーションにしたもの。

See the Pen Untitled by チータツ＠ブログについて語る (@cheese_fuji) on CodePen.