CSSの:hover擬似クラスとは？

:hoverとは？

CSSの:hoverは、ユーザーが要素にカーソルを合わせたときに適用される擬似クラスです。
この機能を使うと、要素に対して動的なスタイルを簡単に設定できます。
たとえば、ボタンの色を変えたり、リンクの装飾を変更したりすることができます。

基本的な構文

:hoverの基本的な書き方は以下の通りです。

/* ボタンの背景色を変更する */
button:hover {
	background-color: #3498db;
	color: white;
}

この例では、ユーザーがボタンにカーソルを合わせたときに背景色が青、文字色が白に変わります。

:hoverが使える要素

:hoverは、以下の要素に対して使用できます：

• リンク要素（<a>）: 従来からよく使われる用途。
• ボタン要素（<button>）: ボタンのホバー効果。
• ブロック要素（<div>、<section> など）: 全体的なスタイルを変更。
• 画像（<img>）: イメージエフェクトを加える場合。

実践的な例

リンクのスタイル変更

リンクにカーソルを合わせたとき、下線を表示して色を変更する：

a {
	color: #555;
	text-decoration: none;
}

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

ボタンのアニメーション効果

ボタンがスムーズに変化するアニメーションを追加：

button {
	background-color: #2ecc71;
	color: white;
	border: none;
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease; /* アニメーション制御部分です */
}

button:hover {
	background-color: #27ae60;
}

画像の拡大効果

画像をホバーしたときに拡大するエフェクトを追加：

img {
	width: 100%;
	transition: transform 0.3s ease; /* アニメーション制御部分です */
}

img:hover {
	transform: scale(1.1); /* 拡大 */
}

注意点

• タッチデバイスの互換性: タッチスクリーンでは:hoverが効かない場合があります。そのため、タッチデバイス用の代替スタイルを検討してください。
• 可読性を重視: ホバー時に色や背景色を変更するときは、十分なコントラストを保つことが重要です。

まとめ

CSSの:hover擬似クラスは、インタラクティブで使いやすいウェブデザインを作るうえで欠かせない機能です。簡単に実装できるため、初心者でもすぐに取り入れることができます。
ぜひ、自分のプロジェクトに適用して、ユーザー体験を向上させましょう！