: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