【CSS】:hoverとは? ~カーソルが要素に乗った時だけ効果を発揮させる方法~ | MUKKUN QUEST
MUKKUN QUEST     

 

【CSS】:hoverとは? ~カーソルが要素に乗った時だけ効果を発揮させる方法~

HTML&CSS

【CSS】:hoverの解説です。読み方は「ホバー」
カーソルが要素に乗った時だけ、効果を発揮させる方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】:hover ~カーソルが要素に乗った時だけ効果を発揮させる方法~

具体的に解説していきます。

【実例】:hoverはこう打てば、こうなる

☝これは、黒い背景に白い文字を表示してある状態です。

例1)文字の色を変化させる

☝このように、文字を表示しているh1タグに、「:hover」をつけてCSSをあてると、カーソルが上に乗った時に
☟このようになります。

例2)背景色を変化させる

☝このように、文字を表示しているグループである、「top」と名付けたdivタグに、「:hover」をつけてCSSをあてると、カーソルが上に乗った時に
☟このようになります。

【特徴】:hoverの持つ特徴

●他のCSSとは違い、指定した要素の中に打ち込むのではなく、指定した要素に対して打ち込むCSSです。

【注意】:hoverを使う時に起こりやすいミスの事例

●画像の通りですが、;hoverの前はスペース等が入らないので、注意。

:hoverに似た効果を持つCSS

active・・・クリックした時だけ、効果を発揮する方法