疑似クラスの「:hover」を使い、アンカーリンクなどのマウスオーバー時の動作を変更させる方法について解説します。
目次
1.1. リンクテキストの色を変更する
1.2. :hoverを使ってマウスオーバー時のリンクテキストの線種を変更する
1.3. :hoverを使ってマウスオーバー時のリンクテキストの背景を変更する
1. リンクに関する疑似クラスについて
疑似クラスの「:hover」はアンカーリンクの動作を変更する際によく使われるクラスで要素にマウスオーバーした時の動作を指定する疑似クラスです。その他の「:link擬似クラス」、「:visited擬似クラス」や「:active擬似クラス」と共に用いられることが多いため、どのような表示になるか一緒に確認してみましょう。
1.1. リンクテキストの色を変更する
以下「hover1.html」のコードをコピーしてPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」とします。
●基本の書式【:hover】
●hover1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS入門 - :hover の使い方</title>
<style>
a:link {
color: #000000; /* リンクをクリックしていない時の色 */
}
a:visited {
color: #FF9696; /* すでにリンクをクリックした時の色 */
}
a:hover {
color: #006DD9; /* マウスオーバーした時に色を変える */
}
a:active {
color: #B20000; /* 要素をマウスでクリックした時の色 */
}
</style>
</head>
<body>
<p><a href="#">リンクテキスト</a>の仕様を変更する方法</p>
</body>
</html>
「:link」疑似クラスはまだ閲覧していない（クリックしていない）ページリンクに対する指定で、
「:visited」疑似クラスはすでに閲覧した（クリック済み）のページリンクに対する指定です。
両方ともリンクに関するものですのでアンカータグ（a要素）に使用します。
サンプルコードはリンクの状態によりテキストの色が変わるように指定しています。
●ブラウザーの表示(:link)
●ブラウザーの表示(:visited)
「:hover」疑似クラスは、リンクをマウスオーバーした時の指定で、
「:active」疑似クラスは、リンクをクリックした時の指定です。
この二つの疑似クラスは動的な疑似クラスでマウスの動きに応じて要素に対する動作の指定をすることができます。リンク以外のタグに使うことも可能です。
●ブラウザーの表示(:hover)
●ブラウザーの表示(:active)
1.2. :hoverを使ってマウスオーバー時のリンクテキストの線種を変更する
次に「:hover」疑似クラスを使ってマウスオーバーした時のリンクの線種を変更するCSSをご紹介します。
●hover2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS入門 - :hover の使い方</title>
<style>
a {
text-decoration: none; /* 通常リンクの下線を装飾なしにする */
border-bottom: 1px solid #666666; /* 通常リンクの下線を実線に変える */
}
a:hover {
border-bottom-style: dotted; /* マウスオーバーした時の下線を点線に変える */
}
</style>
</head>
<body>
<p><a href="#">リンクテキスト</a>の仕様を変更する方法</p>
</body>
</html>
アンカー(a)タグの規定の装飾を無効にする「text-decoration: none」を指定して、下線の色と線種を「border-bottom」プロパティで指定しています。
●ブラウザーの表示(通常のリンクの表示)
マウスオーバー時の表示は「border-bottom-style」プロパティで指定しています。
●ブラウザーの表示(マウスオーバー時の表示)
1.3. :hoverを使ってマウスオーバー時のリンクテキストの背景を変更する
次に「:hover」疑似クラスを使ってマウスオーバーした時のリンクテキストの背景を変更するCSSをご紹介します。
●hover2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS入門 - :hover の使い方</title>
<style>
a {
text-decoration: none; /* 通常リンクの下線を装飾なしにする */
border-bottom: 1px dotted #666666; /* 通常リンクの下線を点線に変える */
}
a:hover {
background-color: #31A9EE; /* マウスオーバーした時の背景を変える */
}
</style>
</head>
<body>
<p><a href="#">リンクテキスト</a>の仕様を変更する方法</p>
</body>
</html>
アンカー(a)タグの規定の装飾を無効にする「text-decoration: none」を指定して、下線の色と線種を「border-bottom」プロパティで指定しています。通常リンクの下線は点線にしました。
●ブラウザーの表示(通常のリンクの表示)
マウスオーバー時のリンクテキストの表示は「background-color」プロパティで色(#31A9EE)を指定しています。
●ブラウザーの表示(マウスオーバー時の表示)
2. 「:hover」疑似クラスを使ってマウスオーバー時の画像を装飾する
2.1. 画像を透過する
「:hover」疑似クラスはリンクに適用するだけでなく、通常のテキストや画像に対して指定することもできます。
●hover3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS入門 - :hover の使い方</title>
<style>
a:hover{
opacity: 0.6; /*マウスオーバー時に画像を透過する設定 */
}
</style>
</head>
<body>
<h1>「:hover」疑似クラスの使い方</h1>
<a href="cherry1.png"><img src="cherry1.png"></a>
</body>
</html>
●ブラウザーの表示(通常のリンク画像の表示)
「opacity」プロパティで画像を透過処理しますが、「:hover」疑似クラスを使うとリンクの画像にマウスオーバーした時に透過表示がされます。
●ブラウザーの表示(マウスオーバー時の表示)
リンクに指定した画像だけでなく、通常の画像の表示についても使用できます。
●hover4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS入門 - :hover の使い方</title>
<style>
.sample:hover{
opacity: 0.6; /*マウスオーバー時に画像を透過する設定 */
}
</style>
</head>
<body>
<h1>「:hover」疑似クラスの使い方</h1>
<img class="sample" src="cherry1.png">
</body>
</html>
「sample」クラスセレクタに「:hover」疑似クラスを指定して、imgタグで指定した画像をマウスオーバーする際に透過処理がされます。
2.2. 画像を拡大・縮小する
次にマウスオーバー時の画像を拡大・縮小させるCSSについて見てゆきましょう。
●hover5.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS入門 - :hover の使い方</title>
<style>
.sample1 {
display: inline-block; /* 要素をインラインブロック化する */
vertical-align: middle; /* 要素のセンタリングを指定 */
transform: perspective(1px) translateZ(0); /* 要素の表示位置を移動させる */
transition-duration: 0.5s; /* 変化に掛かる時間を指定する */
transition-property: transform; /* 変化させるプロパティ名を指定する */
}
.sample1:hover{
transform: scale(1.3); /* 要素の縮尺比率を指定する */
}
</style>
</head>
<body>
<h1>「:hover」疑似クラスの使い方</h1>
<div class="sample1"><img src="cherry1.png"></div>
</body>
</html>
「transform」プロパティで画像の縮尺を指定します。scale()関数に数値を一つ指定すると、X軸とY軸が同じ縮尺率で拡大・縮小されます。X軸とY軸に異なる比率を指定する場合は、scale(X方向の縮尺比率, Y方向の縮尺比率) とカンマ「,」で区切って値を指定します。サンプルコード(hover5.html)では、「transition-duration」プロパティや「」プロパティを使って画像を拡大するのに時間差をもうけて画像がゆっくりと拡大するようにしています。赤い桜の画像の上にマウスを重ねるとゆっくりと画像が大きくなります。サンプルコードを保存して動きを確認してみて下さい。
●ブラウザーの表示(マウスオーバー時の表示)
画像だけでなくテキストボタンを拡大・縮小することも可能です。サンプルコードで作成したテキストボタンの上にマウスを重ねると、画像と同じようにボタンもゆっくりと大きくなります。
●hover6.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS入門 - :hover の使い方</title>
<style>
.button {
border: 2px solid #666666; /* ボックスの境界線を実線に指定 */
border-radius: 3px; /* ボックスの角丸を指定 */
color: #b20000; /* フォントの色を指定 */
margin: 30px; /* ボックス外側余白の指定 */
padding: 6px 12px; /* ボックス内側余白の指定 */
text-decoration: none; /* リンクを装飾なしに変更 */
}
.sample1 {
display: inline-block; /* 要素をインラインブロック化する */
vertical-align: middle; /* 要素のセンタリングを指定 */
transform: perspective(1px) translateZ(0); /* 要素の表示位置を移動させる */
transition-duration: 0.5s; /* 変化に掛かる時間を指定する */
transition-property: transform; /* 変化させるプロパティ名を指定する */
}
.sample1:hover{
transform: scale(1.3); /* 要素の縮尺比率を指定する */
}
</style>
</head>
<body>
<h1>「:hover」疑似クラスの使い方</h1>
<p><a href="#" class="button sample1">ボタンの拡大・縮小</a></p>
</body>
</html>
「.buttun」クラスセレクタでは表示するボタンの境界線や色などの装飾を指定しています。実際にボタンの拡大・縮小をするのは「.sample1」セレクタです。マウスオーバー(.sample1:hover)した際に「transform」プロパティで指定の縮尺でボタンが拡大・縮小します。
●ブラウザーの表示(マウスオーバー時の表示)
