備忘録的プログラミングリファレンス

:hover クラス

 :hover クラスは、エレメントにポインターまたはカーソルが乗ったら(エレメントにマウスオーバーがおきたら)、設定されたスタイルを反映する擬似クラスです。
 hover は、ポインターが乗っているがクリックはされていない状態です。

:hover クラス
a:hover {
  background-color: yellow;
}

詳しくは Example を参照してください

 タッチパネルでの動作では注意が必要です。タッチパネルはポインターがありませんので、この擬似クラスは適応されていないようにみえます。

 操作に対して設定した疑似イベントに反応がなかったようにみえることがあります。 疑似イベントには優先される順、設定された反応順があります。
 例えばリンクとマウス操作に関しては、:link —> :visited —> :hover —> :active という順で反応するように設定されています。 より右側の状態の設定が優先されます。:hoverの設定は:activeの設定で上書きされるということです。

ページ内 Index

構文(Syntax)

CSS

tag_element:hover {
  style_propaties;
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。

 該当するものはmouseover(onmouseover)イベントです。
 :hoverや:activeのように、マウスポインターへの反応やクリックにおけるスタイルの適応は擬似クラスを利用したほうが簡易です。

in HTML

<tagelement onmouseover="oneFunction()">

in JavaScript

object.onmouseover = function(){ };

object.addEventListener("mouseover", script_);

 詳しくはmouseover(onmouseover)イベントを参照して下さい。

Example