CSS :hover 伪类

定義および用法

CSS :hover マウスオーバー時に要素を選択するために使用されます。

ヒント：:hover パseudo-classはすべての要素に使用できますが、リンクに限りません。

ヒント：使用してください： :link 未訪問のページのリンクのスタイルを設定するには、 :visited 訪問したページのリンクのスタイルを設定するには、 :active アクティブなリンクのスタイルを設定します。

注意：CSS定義では、:hover 以下に配置する必要があります： :link および :visited（存在する場合）次に有効になります！

例

例 1

マウスオーバー時のリンクのスタイルを選択および設定してください：

a:hover {
  background-color: yellow;
  font-size: 18px;
}

自分で試してみる

例 2

マウスオーバー時の <p>、<h1>、および <a> 要素のスタイルを選択および設定してください：

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

自分で試してみる

例 3

未訪問、訪問、オーバー、アクティブなリンクのスタイルを選択および設定する：

/* 未訪問のリンク */
a:link {
  color: green;
}
/* ビジターのリンク */
a:visited {
  color: green;
}
/* マウスオーバー時のリンク */
a:hover {
  color: red;
}
/* 活性リンク */
a:active {
  color: yellow;
}

自分で試してみる

例 4

リンクに異なるスタイルを設定する：

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

自分で試してみる

例 5

span要素にマウスをオーバーするとdiv要素が表示される（ツールチップに似ている）：

div {
  display: none;
}
span:hover + div {
  display: block;
}

自分で試してみる

例 6

マウスオーバー時に「ドロップダウン」メニューを表示および非表示にする：

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 语法

:hover {
  css declarations;
}

技術的詳細

ブラウザのサポート

テーブルの数字は、その仮クラスを完全にサポートする最初のブラウザのバージョンを指定しています。

関連ページ

チュートリアル：CSS リンク

チュートリアル：CSS 仮クラス