パソコン

hover ホバー カーソルを当てると色が変わる 擬似クラスとは

擬似クラスとはどんなもの

指定した物全体に影響を与える

文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入された概念です

マウスを当てると色が変わるhoverの使い方

:(コロン)を付けて「:hover」としてCSSで記述します、下の画像の記述はheader内のa要素にカーソルが乗ったら色がroyalblueに変わるという記述です。

カーソルは見えませんがHOMEの方にカーソルが乗って色が変わった様子です。

header内のa要素の記述については下のようになっています、a要素にリンク先を指定してCSSでカーソルが乗ったら色が変わるように設定できます。

擬似要素というのもある

擬似要素とはどのようなもの

文章の一文字目や一行目など要素の一部に対して影響を与えることができるのが擬似要素です。

擬似要素と擬似クラスの見た目の違いは「:(コロン)」を擬似要素が二つで擬似クラスが一つ付けるというのが大きな違いです。

記述の要領は

最初の一文字目を赤色にしたい場合は

htmlの色を変えたい文章にclassを指定します、p(段落)の文字の色を変更するためにpにclass名を「geme」とつけて

CSSの方に「::first-letter」最初の文字を変更する擬似要素を記述しました、色は黒に指定

これが設定された画像です。

両方を使用する場合は擬似クラスを前に擬似要素を後ろに記述します。

hover ホバー カーソルを当てると色が変わる 擬似クラスとは

簡単なhoverについて書きました、これから擬似要素・擬似クラスのことを書いていきますのでよろしく。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事