CSS3

疑似クラス

:hover

  編集:2022.07.09 by T.A.

mdn

マウス ポインターが乗った。

E:hover
E 該当させる要素。

:hover 疑似クラスは、利用者がポインタ指示装置で、要素を指していて、実際に作動化させる必要はない間に適用される。例えば,視覚的なユーザー エージェントでは、カーソル(マウス ポインター)が[要素により生成されたボックス]上を hover したとき、この疑似クラスを適用することもできる。ハードウェア制限に因り hover 状態を検出できない対話的ユーザー エージェント(例えばペン機器)は、この機能をサポートしなくとも、§ 適合性には反しない ― そのようなユーザー エージェントにおいては、単純に、[その種の選択子が、何かに合致することは、決してない]ことになる。

要素のいずれかの子孫が[平坦ツリー(テキスト ノードなどの非要素ノードも含む)内にあって、上の条件に合致する]ならば、要素も :hover に合致する。

文書言語は、要素が :hover に合致し得る追加の仕方を定義してよい。例えば [HTML5] は、ラベルが付与されたコントロール要素は、そのラベルを与えている LABEL 要素が hover されたとき、:hover に合致するものと定義している(参照)。

注記: :hover の状態は、要素の子孫がポインタ指示装置で指されたときにも適用し得るので、ポインタ指示装置の直下にない要素に :hover が適用されることも起こり得る。

:hover 疑似クラスは任意の疑似要素に適用できる。

以下のCSSが組み込んであります:

.Test:hover{
  box-shadow:#faa 5px 5px;
}
<SPAN class=Test>テスト</SPAN><BR>
テスト


テスト
別画面に表示させて。
HTML:

ここに表示
¶[Edge]○
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: