CSSのhover(ホバー)の使い方とサンプルまとめ【transitionについても解説】

CSSのhoverの使い方を知りたいなぁ。
サンプルアリで、transitionについても値の意味を知りたい・・・。

こんな悩みに答える記事になっています。

今回はCSSのホバーについて解説していきます。

前回の記事↓でちょっと触れたのですが、より詳しく解説していきます。

CSSのopacityで画像や文字を透明・薄くする方法と活用法を徹底解説 CSSのOpacityの使い方について紹介しています。透明度を変化させることができるので、ホバーする際や、半透明にして別の要素と重ね合わせるためには必須のCSSになっています。この記事で解説するのは以下の3点です。

解説すること

hoverの使い方
transitionの使い方と例
hoverのサンプル色々

ホバーを覚えることで、デザインの幅が広がるだけでなく、ユーザにとって分かりやすいデザインにすることが可能です！

合わせて読みたいプログラミングスクールの10社比較ランキング【転職、副業、就職の3つの目的別】

この記事の目次

hover(ホバー）のCSSの書き方

そもそもhoverは、マウスのポインタ（アイコン）を要素の上に置いた時に実行されるものです。

リンクやボタンと一緒に使われることがほとんどで、マウスカーソルを合わせたときに何かしらの反応があることで、（ここは押せる部分なんだな）と思わせることができます。

maipyon

そんなhoverは、「疑似クラス」と呼ばれています。

疑似クラスとは？

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

:○○と書きます。

:before,:after,:visited,そして今回紹介する:hoverなど、様々な疑似クラスがあります。

実際のhoverの使い方やCSSを見てみよう

疑似クラスがどうこう言われてもイメージが湧かないと思いますので、実際にどのような使い方をするのか見ていきましょう！

HTML

<div class="sample1">マウスホバーで背景色が変わります。</div>

CSS

.sample1{
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  background-color: #c8e6c9;
  text-align: center;
}

.sample1:hover{/*ホバーしたとき*/
  background-color: #4caf50;
}

このように、sample1というクラスに対してhoverを指定することで、ホバー時に背景色を#c8e6c9から#4caf50に変化させることができます。

マウスホバーで背景色が変わります。

実際にこのようなものが出来上がります。
(スマホの場合、実際にタップしていただければわかります！）

目次へ戻る

ホバーの時に重要なtransitionについて

先ほどの例では、背景色が一瞬で変わってしまいました。

何秒かかけて状態を変化させることで、より分かりやすいデザインになります。

そのためには、transitionというプロパティを使用します。

transitionの基本的な使い方

transition: 0.3s;という風に書くことで、0.3秒かけて変化させるという意味になります。

これは、疑似要素内（:hover内)に書いてはダメです。
実際の例は以下の通りです。分かりやすいよう、1秒かけることにします。

HTML

<div class="sample1">マウスホバーで背景色が変わります。</div>

CSS

.sample1{
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  background-color: #c8e6c9;
  text-align: center;
  transiton: 1.0s;/*1.0秒かける*/
}

.sample1:hover{/*ホバーしたとき*/
  background-color: #4caf50;
}

マウスホバーで1.0秒かけて背景色が変わります。

色が一瞬で切り替わるのではなく、じんわり変わったのが分かると思います。

transitonで要素を指定する

先ほどのように指定した場合、もし:hover内に文字色も背景色も変えるようにしていた場合、どちらも同じ秒数かけて色が変わっていきます。

transition: background-color 1.0s;のように書くことで、「background-color(背景色)のみを1秒かけて変化させる」という意味にすることもできます。

要素ごとに使い分けることで、文字色は一瞬で変わって、背景色だけ後から変化してくる。

といったデザインにすることも可能です。

また、これはtransition: background-color 1.0s,color 2.0s;ようにコンマ区切りで書くこともできます。

変化の度合いを指定する方法

transitionには、変化の度合いを指定することもできます。

変化の度合いは5種類あります。

変化の度合いについて

ease 開始と完了を滑らかにする（初期状態）
linear 一定
ease-in ゆっくり始まる
ease-out ゆっくり終わる
ease-in-out ゆっくり始まってゆっくり終わる

使い方は、transiton: ease-in-out 1.0s;のように使います。

実際の例を見てみます。(分かりやすいように3秒かけます)

ease

linear

ease-in

ease-out

ease-in-out

何回か試して違いを確認してみてください！

種類が多くて何を使ったらいいのか・・・という感じですが、初期状態か、ease-in-outを使っておけば大丈夫かなと思います。

目次へ戻る

基本のホバーサンプルHTML+CSS

ここまでのおさらいを含め、サンプルを見ながら解説していきます。

特定のCSS以外の部分で分からないところがあれば、以下の記事をチェックすればわかるかなと思います。

【初心者向けCSS入門】Webデザインのための基本まとめ CSS入門となるような記事になっています。CSSってなに？という人でも、CSSが分かるように初心者に向けて解説した記事になっています。CSSについて学び、デザイン変更が自力でできるようになりましょう。

ホバーで文字に下線を付けるCSS

ホバーしたときに文字に下線をつけるのは、文字だけのリンクでよく使います。

例

トップページに戻ります

CSS

a{
  color: #009ee9;
}

a:hover{
  color: #ff9d5a;
  text-decoration: underline;
}

リンクはaタグなので、aタグに関して設定していきます。

text-decoration: underline;の部分が、文字に下線をつけるという意味になります。

ホバーしたら浮いたように見せるCSS

影をつけることで、ボタンが浮いたように見せることもできます。

ホバーで浮いたように見せる

影については、以下の記事で解説しています。

【CSS】box-shadowやdrop-shadowで要素に影を付ける方法とサンプル CSSでbox-shadowやdrop-shadowでの影の付け方を解説します。ドロップシャドウはあまり使われませんが、覚えておくといざという時に便利。CSSで影の付け方を一気に学べる記事になっています。

CSSのbox-shadowの部分が分からないという人は、参考にしてみてください。

HTML

<div class="sample2">ホバーで浮いたように見せる</div>

CSS

.sample2{
  width: 100%;
  box-sizing: border-box;
  border-rasius: 10px;
  color: #fff;
  padding: 2rem;
  background-color: #03a9f4;
  text-align: center; 
  transition 0.3s;
}

.sample2:hover{
  box-shadow: 0 14px 20px -4px rgba(0,0,0,.25);
}

ホバーで要素を少し動かすCSS

先ほどのボタンを少し上に動かすこともできます。

ホバーで浮いたように見せる

HTML

<div class="sample3">ホバーで浮いたように見せる</div>

CSS

.sample3{
  width: 100%;
  box-sizing: border-box;
  border-rasius: 10px;
  color: #fff;
  padding: 2rem;
  background-color: #03a9f4;
  text-align: center; 
  transition 0.3s;
}

.sample3:hover{
  box-shadow: 0 14px 20px -4px rgba(0,0,0,.25);
  transform: translateY(-2px);/*ここを追加しただけです*/
}

transformというプロパティを使用することで、要素を動かすことができます。

translateYでY軸方向、translateXでX軸方向に動かすことができます。

（説明は割愛しますが）ブラウザによってはtransformが使えない(対応していない)場合がありますので、CSSのベンダープレフィックスを再確認してみるを参考にしてみてください。

ホバーで要素を拡大するCSS

要素を拡大するときも、transformを使用します。

ホバーで拡大する

HTML

<div class="sample3">ホバーで拡大する</div>

CSS

.sample4{
  width: 100%;
  box-sizing: border-box;
  border-rasius: 10px;
  color: #fff;
  padding: 2rem;
  background-color: #03a9f4;
  text-align: center; 
  transition 0.3s;
}

.sample4:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}

目次へ戻る