17. :hover(疑似クラス)を使ってみよう

目次

:hoverの使い方

疑似クラスとは、CSSのセレクタに一定のクラスを追加したもので、「classに似た何か」といったイメージでOKでしょう。
hover(ホバー)とは、要素の上にマウスカーソルが乗っている状態のことを言います。

つまり、上の画像では、「画像にカーソルが乗っているときに画像をどうするか」という意味になり、具体的な指示を{}の中に書いていきます。

試しに、要素の透明度を指定するopacityプロパティを使ってみます。


↑このように、画像にホバーしたときは画像に雲がかかったように薄くなっているのが分かります。

また、疑似クラスはHTMLのタグだけでなく、idやclassに対しても使えます。

要素の透明度を指定するopacity

opacityプロパティでは要素の透明度を指定できます。値は0から1まで指定でき、大きくなるほど不透明に、小さくなるほど透明になります。
つまり、1を指定すると完全に要素が表示され、0だと要素が消えることになります(なくなるわけではなく、見えなくなるだけです)。

デフォルトで画像のopacityをある程度透明にして、ホバーしたときにopacityを不透明にしたり、その逆もよく使われる方法なので、覚えておくといいでしょう。



:hoverでリンクの下線を操作しよう text-decoration

aタグはデフォルトで下線が引かれており、ホバーした時も下線が引かれたままになっています。これをもう少しリンクっぽく見えるようにするには、:hoverで下線を付け外しする方法があります。
下線の有無はtext-decorationプロパティで指定でき、下線をなくす場合は値にnoneを、付ける場合はunderlineを指定します。

テスト用リンク

上の例ではホバーしたときに下線を消し、下の例ではデフォルトで下線を消して、ホバーしたときに下線を付けています。

テスト用リンク

text-decorationではなくborderを下線として使う

text-decorationは簡単に下線の付け外しができるというメリットがありますが、下線を細かく装飾したいときはborder-bottomを使ったほうがいいでしょう。例えば、下線の太さ・色・余白を設定したいような場合です。

リンクにborder-bottomで下線を付けるなら、まずは線が二重にならないようにtext-decorationをnoneにしておきましょう。

ちなみに、下線の太さ・色はborder-bottomで指定できますが、余白を作りたい場合は、内側の余白になるのでpadding-bottomを設定すればOKです。ただし、インライン要素に上下のpaddingを指定することになるので、display:block;またはdisplay:inline-block;としておきます。

テスト用リンク

ただ、これではホバーしたときと外した時で、下の要素がガタガタにずれてしまいます。これは、ホバーしたときに、ホバー前にはなかったボーダー要素が出てきて、その分の太さが後の要素を押し下げてしまっているからです。

これを解決するには、少し無理やりですが、ホバー前に背景と同じ色(ここでは白)のボーダーを指定する方法があります。

テスト用リンク

これで、ホバーしても下の要素がずれずに表示されるようになりました!