English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 参考マニュアル

CSS @ルール(RULES)

CSS 属性大全

CSS :hover 選択子

:hover CSSの仮類は、ユーザーが指示デバイスで要素を指し（それをアクティブにしない）の際に適用されます。このスタイルは、:link、:visited、:activeなどのリンクに関連する仮類で上書きされます。効果を確実にするために、:hoverルールは:linkと:visitedルールの後に、:activeルールの前に、LVHAの順序で宣言する必要があります：:link－:visited－:hover－:active。:hover仮類は、どの仮要素にも使用できます。

完全なCSS選択子リファレンスマニュアル

オンラインサンプル

マウスがリンクに移動したときのスタイルを設定します：

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
<style>　
a:active
{
background-color:lightgreen;
}
</style>
</head>
<body>
<a　href="//ja.oldtoolbag.com">oldtoolbag.com</a>
<a　href="//www.pcjson.com"　target="_top">pcjson.com</a>
<p><b>注意:</b>　マウスが接続に移動した場合　:hover　選択子のスタイルはそのハイパーリンクにリンクされます。</p>
</body>
</html>
テストして見て‹/›

定義と用法

マウスがリンクに移動したときに追加される特別なスタイルです。

ヒント: :hover選択子はリンクに限らず、すべての要素に適用できます。

ヒント: :link 未訪問のページリンクのスタイルを設定する選択子です。 :visited 訪問したページのリンクのスタイルを設定する選択子です。:activeリンクをクリックしたときのスタイルを設定する選択子です。

注意: 予期される効果を生み出すために、CSSの定義では、:hoverは:linkおよび:visitedの後に位置する必要があります！！

ブラウザの互換性

テーブルの数字は、その属性をサポートする最初のブラウザバージョン番号を示します。

セレクタ




:hover4.07.02.03.19.6

注意:IEでは宣言する必要があります !DOCTYPE ：hover クロージャーが効果的に動作するようにするためには。

関連ページ

CSS 教程: CSS リンク

CSS 教程: CSS 仮クラス

オンラインサンプル

アクティブな、訪問した、未訪問のリンクまたはマウスが上に乗っているリンク：

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
<style>
a:link　　　　{color:green;}
a:visited　{color:green;}
a:hover　　　{color:red;}
a:active　　{color:yellow;}
</style>
</head>
<body>
<p>マウスを上に持ってクリックしてください:　<a　href="//ja.oldtoolbag.com/">oldtoolbag.com</a></p>
</body>
</html>
テストして見て‹/›

オンラインサンプル

異なるスタイルのリンクスタイル：

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
<style>
a.ex1:hover,a.ex1:active　{color:red;}
a.ex2:hover,a.ex2:active　{font-size:150%;}
a.ex3:hover,a.ex3:active　{background:red;}
a.ex4:hover,a.ex4:active　{font-family:monospace;}
a.ex5:visited,a.ex5:link　{text-decoration:none;}
a.ex5:hover,a.ex5:active　{text-decoration:underline;}
</style>
</head>
<body>
<p>リンクにマウスを合わせてスタイルの変更を確認.</p>
<p><a　class="ex1"　href="/css/">このリンクが色を変更</a></p>
<p><a　class="ex2"　href="/css/">このリンクがフォントサイズを変更</a></p>
<p><a　class="ex3"　href="/css/">このリンクが背景色を変更</a></p>
<p><a　class="ex4"　href="/css/">このリンクがフォントスタイルを変更</a></p>
<p><a　class="ex5"　href="/css/">このリンクが文字装飾を変更</a></p>
</body>
</html>
テストして見て‹/›

完全なCSS選択子リファレンスマニュアル

CSS関数（Functions）CSS選択子全解説