CSSの:hoverセレクター完全ガイド｜基本的な使い方と実践例を解説

CSSの:hoverセレクターは、マウスカーソルが要素の上に乗った（ホバーした）ときにその要素を選択するための疑似クラスです。たとえば、リンクにカーソルを合わせた瞬間にリンクの色を変える、といったことが簡単に実現できます。

Webページ上の要素に、ユーザーがカーソルを重ねたときだけスタイルを変化させたい場面はよくあります。そんなときに活躍するのが:hoverセレクターです。この記事では、CSSセレクターの基本から:hoverの具体的な使い方まで、実例を交えながらわかりやすく解説します。読み終えるころには、CSSのプロのように:hoverを使いこなせるようになっているはずです。

CSSセレクターの基本

CSSにおいて、セレクターは「どのHTML要素にスタイルを適用するか」を指定するための仕組みです。id、class、属性、要素のグループなどを基準に要素を選択できるため、特定の要素だけにピンポイントでスタイルを当てることができます。

たとえば、HTML文書内のすべての<h1>タグの背景色をホットピンクにしたい場合は、次のように書きます。

h1 {
	background-color: hotpink;
}

このコードでは、h1というセレクターでページ内のすべての<h1>タグを選択し、波括弧（{ }）の中に適用したいスタイルを記述しています。

CSSの:hoverセレクターとは

:hoverセレクターは、マウスカーソルが要素の上に乗ったときにその要素を選択します。あらゆるCSS要素に対して使用できますが、特によく使われるのはリンク（<a>タグ）です。:hoverは、選択したい要素名の後ろに記述します。たとえばリンクであればa:hoverのように書きます。

:hoverセレクターが役立つシーンは多岐にわたります。代表的なユースケースをいくつか紹介します。

テキストにカーソルを合わせたときに、文字色を変える
画像にカーソルを合わせたときに、画像のサイズを変える
ボタンにカーソルを合わせたときに、ボタンの色を変える

いずれの場合も、「ユーザーが要素にカーソルを重ねたときに特定のスタイルを適用する」という点が共通しています。

:hoverセレクターの構文

:hoverセレクターの基本構文は次のとおりです。

selector:hover {
	/* CSSルール */
}

各要素の意味は以下のとおりです。

selector：:hoverを適用する対象の要素を指定します。たとえば<h3>要素にホバーしたときに効果を発火させたい場合は、h3と書きます。
:hover：ユーザーが対象要素にカーソルを重ねている間だけ、CSSルールのスタイルを適用するようブラウザーに指示します。
CSSルール：ホバー中に適用されるスタイルです。文字のフォントサイズ、<div>タグの背景色、<input>フィールドの角丸（border-radius）など、自由に指定できます。

それでは、Web開発者が:hoverセレクターをどのように活用できるのか、具体的な例を見ていきましょう。

:hoverセレクターの実践例

例1：リンクの色を変える

:hoverセレクターを使うと、リンクにカーソルが乗ったときに文字色を変えられます。

たとえば、「Career Karma homepage」というテキストのリンクを作り、通常時はライトグリーン（lightgreen）で表示するとします。そして、ユーザーがカーソルを重ねたらオレンジ（orange)に変化させたい場合、次のようなコードで実現できます。

<html>

<a href="https://careerkarma.com">Career Karma homepage</a>

<style>

a {
	color: lightgreen;
}

a:hover {
	color: orange;
}

</style>

コードを分解して見てみましょう。

HTML側では、<a>タグでCareer Karmaのホームページへのリンクを定義しています。CSS側では、2つのルールを記述しました。

1つ目のルールは、ページ内のすべての<a>タグに適用され、colorプロパティによって文字色をlightgreenに設定します。

2つ目のルールa:hoverは、ユーザーが<a>タグにカーソルを重ねたときに、リンクの色をオレンジに変更します。これが:hoverセレクターの働きです。

この結果、ユーザーが「Career Karma homepage」のテキストにカーソルを合わせると、リンクの色がオレンジに変わります。

例2：テキストブロックを表示する

:hoverセレクターは、特定のテキストにカーソルを合わせたときに、別のテキストブロックを表示する用途にも使えます。

たとえば、よくある質問（FAQ）ページを作っているとしましょう。質問にカーソルを合わせると、その回答が表示される仕組みです。次のコードで実装できます。

<html>

<span>What is Career Karma?</span>
<div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div>

<style>

div {
	display: none;
	background-color: orange;
	padding: 10px;
}

span:hover + div {
	display: block;
}

</style>

ここでは、<span>タグで質問「What is Career Karma?」を作成し、<div>タグでその回答を記述しています。

CSSでは、<div>タグに次のスタイルを指定しています。

display: none … <div>タグを非表示にする
background-color: orange … <div>タグの背景色をオレンジにする
padding: 10px … <div>タグの内容と枠線の間に10pxの余白を作る

そして、span:hover + divというセレクターでルールを定義しています。このセレクターは「<span>タグがホバーされたとき、その直後にある<div>タグ」を対象とする隣接セレクター（+）の組み合わせです。このルールにより<div>のdisplayがblockに切り替わり、要素が表示されます。つまり、ユーザーが質問部分にカーソルを重ねると、回答が現れるという仕組みです。

例3：画像を切り替える

:hoverセレクターのもうひとつの活用例が、画像の切り替えです。ユーザーが画像にカーソルを重ねると、別の画像に変化させることができます。

たとえば、地域のカフェのWebサイトを制作しているとします。「About」ページのコーヒーの写真にカーソルを合わせると、カフェの内観写真に切り替わる、といった演出です。次のコードで実装できます。

<html>

<img height="750" width="1250" class="aboutImage" />

<style>

.aboutImage {
	background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1062&q=80");
}

.aboutImage:hover {
	background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
}

</style>

ここでは、高さ750px・幅1250pxの画像を生成する<img>タグを定義し、aboutImageというクラスを割り当てています。

CSS側では2つのルールを宣言しました。

1つ目のルールは、.aboutImageクラスを持つ要素に表示する背景画像を設定するものです。ここではコーヒーのストック写真を背景に指定しています。

2つ目のルール.aboutImage:hoverは、ユーザーがホバーしている.aboutImageクラスの要素の背景画像を、カフェのストック写真に切り替えます。

:hoverセレクターのその他の活用例

これまで見てきたように、:hoverセレクターはさまざまな場面で活用できます。さらに理解を深めたい方は、次のような関連トピックを学ぶのがおすすめです。

CSSトランジション：要素にホバーしたときに滑らかなアニメーション効果を加える方法
CSSナビゲーションバー：CSSでナビゲーションバーを作成する方法
CSSドロップダウンメニュー：CSSでドロップダウンメニューを作成する方法

また、:hoverセレクターはボタンのホバーエフェクトにもよく使われます。ボタンの見た目を変化させたり、ホバーアニメーションを発火させたりできます。CSSセレクター全般についてさらに学びたい方は、セレクターを網羅的に解説したガイドも参考にしてください。

まとめ

CSSの:hoverセレクターを使うと、ユーザーが要素にカーソルを重ねた瞬間にその要素を選択し、新しいスタイルを適用できます。適用されたスタイルは、カーソルが要素から離れるまで表示され続けます。

この記事では、CSSセレクターの基本と:hoverセレクターの使い方を、実例とともに解説しました。これであなたも、CSSのプロのように:hoverセレクターを活用できるはずです。まずは自分のサイトのリンクやボタンに、さりげないホバーエフェクトを加えてみてはいかがでしょうか。

CSSで要素を回転させる方法！rotate()関数の基本と実践テクニック

CSSセレクター入門ガイド：基本の書き方と使い方を実例付きで解説

CSSの子セレクター（Child Selector）の使い方を徹底解説
CSSの子セレクターは、指定した要素の直下にある子要素だけを選択したい場合に使用するセレクターです。より具体的にスタイルを適用したい場面で非常に役立ちます。div > p子セレクターとは？子セレクターは「>」記号を使って表現します。上記の例では「div > p」と記述することで、<div>要素の直接の子要素である<p>要素のみが選択されます。注意すべき点は、孫要素やそれ以降の階層には適用されないということです。例えば、<span>タグの中に入れ子になった<p>要素は、divから見ると孫要素にあたるため、スタイルの対象外となります
CSSの子孫セレクタとは？基本の書き方と実行例をわかりやすく解説
CSSの子孫セレクタ（descendant selector）は、指定した要素の「内側にあるすべての子孫要素」にスタイルを適用するためのセレクタです。親要素と対象要素を半角スペースで区切って記述するのが特徴で、直下の子要素だけでなく、孫要素やそれ以降の階層にある要素もすべてマッチします。子孫セレクタの基本的な書き方構文は以下のように、親となるセレクタの後に半角スペースを空けて、対象となるセレクタを続けて記述します。親セレクタ対象セレクタ { プロパティ: 値; } たとえば div p と書けば、「div要素の中に存在するすべてのp要素」がスタイル適用の対象になります。divの直下