【CSS初心者向け】疑似クラス『hover』の使い方を完全解説

カーソルが重なったタイミングで背景色が変わったり、字が太くなったりすることで、ユーザーにボタンを押させたような錯覚を与えることができるような機能の付け方に悩んだことはありませんか。

今回はCSSの疑似クラス『hover』を使用してそれらを解決する方法を説明していきます。

準備：ボタンの原型を作成する

疑似クラス『hover』について解説する前に、今回作成するボタンの母体となる原型を作成していきます。

下記のコードを見てください。

<ul class="menu">
    <li>TOP</li>
    <li>SERVICE</li>
    <li>NEWS</li>
    <li>CONTACT</li>
</ul>

.menu {
    display: flex;
    list-style: none;
}

.menu li {
    padding: 8px 25px;
    color: #FFF;
    border-top: 1px solid #FF0461;
    background-color: #FF0461;
}

HTMLではulタグとliタグでリストを作りました。そして、ulタグにはclass属性『menu』を指定しました。

CSSではclass属性『menu』が指定されているulタグにプロパティ、値として『display: flex;』と『list-style: none;』指定しました。

また、liタグにはプロパティ、値として『padding: 8px 25px;』、『color: #FFF;』、『border-top: 1px solid #FF0461;』、『background-color: #FF0461;』を指定しました。

今回は様々なサイトに多く存在するメニューバーを使用してボタンを作成していきます。

現状は『hover』を使用しないで作成しているため、カーソルが重なったとしても何の変化も見られません。

ここまでのメニューバーの作成方法について難しいと感じる方は下記にメニューバー作成の手助けとなる記事をまとめました。参考にしてみてください。

それではここから本格的に疑似クラス『hover』について解説していきます。

・セレクタの末尾に『:hover』を追記して背景色を変える

セレクタの末尾に『:hover』を追記することでカーソルが重なったタイミングで別のCSSを指定することが可能となります。

今回は背景色を変えていきます。下記のコードを見てください。

.menu {
    display: flex;
    list-style: none;
}

.menu li {
    padding: 8px 25px;
    color: #FFF;
    border-top: 1px solid #FF0461;
    background-color: #FF0461;
}

.menu li:hover {
   background-color:#FF82B2;
}

CSSでliタグをセレクタとし、疑似クラス『hover』を指定して、プロパティ、値として、『background-color:#FF82B2;』を指定しました。

上記の画像は『TOP』にカーソルが重なっている設定で見てください。もし、他の部分にカーソルが重なったらその部分が今回の 『TOP』 のように背景色が変わります。

『 menu li 』のセレクタとは別に、新しく記述したセレクタの『 menu li 』の末尾に『 :hover 』を追記することでカーソルが重なったタイミングのデザインを指定することができます。

今回はプロパティ、値として『background-color:#FF82B2;』を指定したことで、カーソルが重なったタイミングで背景色がTOPの部分のみ変わっていることが分かると思います。

注意：hoverで変更する色でユーザーにもたらす印象を意図する方向に動かす

色を変更するときには変更前、変更後の色でユーザーにどのような印象をもたらしたいかを考えて色を決めなければいけません。

元々が濃い方でカーソルが重なったタイミングで薄い方になる場合、ユーザーはボタンを押している感覚を受けやすくなります。

一方、 元々が薄い方でカーソルが重なったタイミングで濃い方になる場合、ユーザーはどのボタンが押されているかを認識しやすくなります。

この後に説明する字を太くするタイミングでも気を付けなければならないことですが、特に色を変更する際には注意したいポイントとなります。

このように色の変化によって、印象が変わることを理解した上で、制作するサイトに合わせて色彩を変えてみてください。

また、今回は色が変化したことを理解して欲しかったため、使用しませんでしたが、このような時に最適なプロパティとして『opactiy』があります。

『opactiy』は色の透過度を変えるためのプロパティでボタンの色を変えるには最適なプロパティとなります。

『opacity』の使い方についてはプロパティ『opacity』って何？その意味、使い方を簡単解説で詳しく解説していますので、参考にしてみてください。

・ セレクタの末尾に『:hover』を追記して字を太くする

続いて、 セレクタの末尾に『:hover』を追記して字を太くする方法を解説していきます。

下記のコードを見てください。

.menu {
    display: flex;
    list-style: none;
}

.menu li {
    padding: 8px 25px;
    font-weight: 100;
}

.menu li:hover {
   font-weight: 1000;
}

HTMLは先述したものと同じものを使用しています。

CSSは少し記述を変えていますが、今回必要となってくるのはセレクタ『.menu li』のプロパティ、値である『font-weight: 100;』とセレクタ『.menu li:hover』のプロパティ、値である『font-weight: 1000;』です。

今回も前述と同様に『TOP』にカーソルが重なっている設定で見てください。

色を変えた時と同様に 『 .menu li 』のセレクタとは別の新しいセレクタ『 .menu li 』の末尾に『 :hover 』を追記することで、新しいプロパティ、値がカーソルが重なったタイミングで反映されます。

今回はプロパティ、値が『font-weight: 1000;』なので、カーソルが重なったタイミングではそのプロパティ、値が反映されます。

色を変える時も文字を太くする時も疑似クラスのないセレクタを基本デザインとし、疑似クラス『hover』を指定したセレクタにカーソルを重ねた時のデザインを記述するというのが、基本的な考え方になっていきます。

また、今回使用したプロパティ『font-weight』についてはプロパティfont-weightを徹底解説しますで詳しく解説していますので、参考にしてみてください。

今回は疑似クラス『hover』の使い方について、例を使用しながら解説していきました。

『hover』の機能を追加 することで ユーザーが視覚的にどこを選択しているのかが分かりやすくなり、サイトの利便性の向上に繋げることができます。

決して難しいことではないのであなたのサイトにも使用してみてはいかがでしょうか。