From eaca646fa96a5b230869c1868d7f58e8b178867a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 18 Jun 2021 02:52:14 +0900 Subject: Web/CSS/:hover を更新 (#1128) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/08 時点の英語版に同期 --- files/ja/web/css/_colon_hover/index.html | 63 ++++++++++++++++---------------- 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/files/ja/web/css/_colon_hover/index.html b/files/ja/web/css/_colon_hover/index.html index d6420f0f5b..5a6feb6729 100644 --- a/files/ja/web/css/_colon_hover/index.html +++ b/files/ja/web/css/_colon_hover/index.html @@ -1,34 +1,37 @@ --- title: ':hover' -slug: 'Web/CSS/:hover' +slug: Web/CSS/:hover tags: - CSS - Layout + - Pseudo-class - Reference + - Selector - Web - - 疑似クラス -translation_of: 'Web/CSS/:hover' + - 擬似クラス +browser-compat: css.selectors.hover +translation_of: Web/CSS/:hover --- -
{{CSSRef}}
+
{{ CSSRef }}
-

CSS の :hover 疑似クラスは、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル（マウスポインタ―）で要素の上をホバー（通過）させたときにこの状態になります。

+

:hover は CSS の 擬似クラスで、ユーザーがポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがカーソル (マウスポインター) で要素の上をホバー (通過) させたときにこの状態になります。

/* 「ホバー」状態の <a> 要素を選択します */
 a:hover {
   color: orange;
 }
-

:hover 疑似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の疑似クラス （{{cssxref(":link")}}、{{cssxref(":visited")}}、 {{cssxref(":active")}}）によって上書きされます。適切にリンクにスタイルを適用するには、 LVHA 順: :hover — :visited — :hover — :active で定義されるように、 :link と :visited の後、 :active の前に :hover の規則を置いてください。

+

:hover 擬似クラスによって定義されたスタイルは、少なくとも同等の仕様を持つリンク関連の擬似クラス ({{ cssxref(":link") }}、{{ cssxref(":visited") }}、 {{ cssxref(":active") }}) によって上書きされます。適切にリンクにスタイルを適用するには、 :hover の規則を :link と :visited の後、 :active の前に置き、 LVHA 順: :hover — :visited — :hover — :active で定義されるようにしてください。

-
メモ: :hover 疑似クラスはタッチスクリーンで問題になります。ブラウザ―によっては、 :hover 疑似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーがタッチをやめるても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
+
注: :hover 擬似クラスはタッチスクリーンで問題になります。ブラウザーによっては、 :hover 擬似クラスが全く選択されなかったり、要素をタッチした直後だけ選択されたり、ユーザーが指を離しても選択され続け、他の要素にタッチするまで続いたりします。ウェブの開発者は、ホバー機能が制限されていたり存在しなかったりしても、コンテンツにアクセスできるように考慮してください。
-

構文

+

構文

{{csssyntax}} -

例

+

例

-

基本的な例

+

基本的な例

HTML

@@ -45,59 +48,55 @@ a:hover { background-color: gold; } -

結果

+

結果

{{EmbedLiveSample("Basic_example")}}

- + -

:hover 疑似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。

+

:hover 擬似クラスを使用して、サムネイルの上をマウスが通過したときだけフルサイズに画像が表示される画像ギャラリーを作成することができます。実行できるものとして、このデモを参照してください。

-
メモ: :checked 疑似クラスを（隠れたラジオボタンに適用して）使用した同様の効果の例として、 :checked のリファレンスページから取ったこのデモも参照してください。
+
注: :checked 擬似クラスを (隠れたラジオボタンに適用して) 使用した同様の効果の例として、 :checked のリファレンスページから取ったこのデモも参照してください。
-

仕様策定状況

+

仕様書

- - + + - - - + + + - - + + - - + + - +
仕様書策定状況コメント備考連絡先
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} {{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}:hover があらゆる疑似要素に適用できるようになった。:hover があらゆる擬似要素に適用できるようになった。CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}目立った変更はなし。
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }} 初回定義。
-

ブラウザーの対応

+

ブラウザーの互換性

-
- +

{{Compat}}

-

{{Compat("css.selectors.hover")}}

-
- -

関連情報

+

関連情報