CSS :ホバーセレクター
例
リンクの上にマウスを置いたときに、リンクを選択してスタイルを設定します。
a:hover
{
background-color: yellow;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
セレクターは、:hover
要素の上にマウスを置いたときに要素を選択するために使用されます。
ヒント:: hoverセレクターは、リンクだけでなく、すべての要素で使用できます。
ヒント::linkセレクターを使用して未訪問ページへのリンクのスタイルを設定し、 :visitedセレクターを使用して訪問済みページへのリンクのスタイルを設定し、 :activeセレクターを使用してアクティブリンクのスタイルを設定します。
注:: hoverは、CSS定義で:linkと:visited(存在する場合)の後に来る必要があります。
バージョン: | CSS1 |
---|
ブラウザのサポート
表の数字は、セレクターを完全にサポートする最初のブラウザーのバージョンを示しています。
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
注: IE では、:hoverセレクターが<a>要素以外の要素で機能するには、 <!DOCTYPE>を宣言する必要があります。
CSS構文
:hover {
css declarations;
}
その他の例
例
マウスを上に置いたときに、<p>、<h1>、および<a>要素を選択してスタイルを設定します。
p:hover, h1:hover, a:hover {
background-color: yellow;
}
例
未訪問、訪問済み、ホバー、アクティブなリンクを選択してスタイルを設定します。
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
例
さまざまなスタイルのスタイルリンク:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
例
<span>要素にカーソルを合わせると、<div>要素(ツールチップなど)が表示されます。
div {
display: none;
}
span:hover + div {
display: block;
}
例
マウスホバーで「ドロップダウン」メニューを表示および非表示にします。
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
関連ページ
CSSチュートリアル:CSSリンク
CSSチュートリアル:CSS疑似クラス