:hoverについて

記事
IT・テクノロジー
:hoverとは要素をマウスオーバーした際に実行される疑似クラス。
(リンクを作成するときに使用するaタグと一緒に使用される)
疑似クラスとは、すでにいくつか用意されているクラスで、要素が特定の証券になったときに適応されるもの。

aタグに使用できる疑似クラスは…
link → visited → hover → active がある。

メリットとしては、マウスオーバーしたときに 『ココがリンクですよ!』
とわかりやすくページに誘導することができます。
hover (2).png
こんな感じで背景カラーが変わるように設定!
マウスオーバーすると文字や背景の色を変えることができました!

WordPressのプラグイン
【 シンプルカスタムCSS&JS 】を使用して次のようにセレクタを指定してCSSを追加しました。

.body .has-watery-red-background-color:hover{
    background-color: #f2b8b8;

できるようになったことをブログで書き留めていきたいと思っています。
参考になればと思います。
もし間違えなどあればご教授ください。

ではまた!さようなら~


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す