【CSS】よく使うhoverテクニック3選　知っておくと便利です

「:hover」を使ったテクニックを３つ紹介します。

WEB制作において知っておくと大変便利ですので、ぜひ参考にしてください。

それではさっそく見ていきましょう。

異なる要素をアクションさせる方法

子要素を変化させる

まずは子要素を変化させるコードです。

See the Pen
hover-action-child by t.h (@tomtom15)
on CodePen.

親要素である青い部分にhoverしてみてください。
子要素の白い部分も青くなります。

ＣＳＳの書き方は、

親要素:hover 子要素{
アクション内容
}

です。

非子要素を変化させる

次は子要素ではない別要素を変化させるコードです。

See the Pen
hover-action-another by t.h (@tomtom15)
on CodePen.

先ほどの子要素を変化させるコードと違う点は

「:hover」→「:hover+」としている点です。

擬似要素をアクションさせる方法

「トップへ戻るボタン」をサンプルに紹介します。
「TOP」にhoverすると、縦線が上に動いて、トップへ戻ることを促してくれます。

※トップへスクロールするコードは省略します。

See the Pen
Untitled by t.h (@tomtom15)
on CodePen.

ポイントは

#move:hover::after{

のところです。

「:hover」の後ろに「::after」をつけてあげましょう。

これで擬似要素だけが動きます。

数値やアクション内容を変えて自分好みにアレンジしちゃってください。

もちろん、擬似要素に before を使用した場合は「::before」になります。

ボーダーを使ったアニメーション

ヘッダーナビゲーションでよく使わています。

See the Pen
Untitled by t.h (@tomtom15)
on CodePen.

CSSの記載は必要最低限に抑えてますので、余白など足りない部分はアレンジしてください。

CSSには、初心者の人でもわかりやすいように、コメントを入れてます。
不要だったら消しちゃってください。

まとめ

いかがでしたでしょうか。

基本的な仕組みさえ抑えておけば応用はきくので、自分なりにアレンジしていくとけっこう楽しいですよ。

hoverをうまく使ってオシャレなWEBサイトを作りましょう。

それではまた。

hoverのエラーも参考として紹介します。