web-dev-qa-db-ja.com

CSSで「ホバー」を使用する方法

この目標を達成するために、以下のコードを使用しました。

マウスをアンカーの上に置くと、下線が表示され、

しかし、それは動作しませんでした、

    <a class="hover">click</a>

    a .hover :hover{
        text-decoration:underline;
    }

これを行うのに適切なバージョンは何ですか？

csshoveranchor
29
omg

マウスがリンク上にあるときに下線を表示する場合は、次のようにします。

a:hover {text-decoration: underline; }

十分ですが、必要に応じて「ホバー」のクラス名を使用することもできます。また、以下も同様に適用できます。

a.hover:hover {text-decoration: underline; }

ちなみに、a:hoverの擬似要素はa.hover:hoverと同じことを行うため、 'hover'のクラス名は要素に実際には何も追加しないことに注意してください。クラス名を使用した単なるデモンストレーションでない限り。

34
David Thomas

それには多くの方法があります。 A要素に「ホバー」クラスが本当に必要な場合は、次の手順を実行する必要があります。

a.hover:hover { code here }

繰り返しますが、このようなclassNameが存在することはまれです。これが通常のホバーの方法です。

select:hover { code here }

以下にいくつか例を示します。

1

HTML：

<a class="button" href="#" title="">Click me</a>

CSS：

.button:hover { code here }

2

HTML：

<h1>Welcome</h1>

CSS：

h1:hover { code here }

：hoverは、多くの擬似クラスの1つです。

たとえば、変更することができ、マウスが要素の上をホバーするとき、クリックされるとき、および以前にクリックされたときの要素のスタイルを制御できます。

HTML：

<a class="home" href="#" title="Go back">Go home!</a>

CSS：

.home { color: red; }
.home:hover { color: green; }
.home:active { color: blue; }
.home:visited { color: black; }

例として挙げた厄介な色は別として、「home」クラスのリンクはデフォルトで赤、マウスがホバーしたときは緑、クリックしたときは青、クリックすると黒になります。

お役に立てれば

7
SirCommy

答えではありませんが、CSSがHTMLと一致しない理由の説明。

Cssでは、ブラウザが子を見るように指示するための区切りとしてスペースが使用されるため、css

a .hover :hover{
   text-decoration:underline;
}

「要素を探してから、ホバークラスを持つ子孫を探し、ホバー状態を持つ子孫の子孫を探します」という意味で、このマークアップに一致します

<a>
   <span class="hover">
      <span>
         I will become underlined when you hover on me
      <span/>
   </span>
</a>

<a class="hover">I will become underlined when you hover on me</a>に一致させる場合は、a.hover:hoverを使用する必要があります。これは、「クラスホバーおよびホバー状態の要素を探す」ことを意味します。

6
valentinas

a.hover：hover

4
Ballsacian1
a.hover:hover {
    text-decoration:underline;
}
4
chaos

セレクターと疑似セレクターを連結する必要があります。また、スタイルを含めるためのスタイル要素も必要です。ほとんどの人は、多くの利点（1つのキャッシュ）のために外部スタイルシートを使用します。

<a class="hover">click</a>

<style type="text/css">

    a.hover:hover {
        text-decoration: underline;

    }

</style>

注：特定のリンクのみを定義してこの動作を行う場合を除き、ホバークラスは必要ありません（場合によっては）

2
alex

Hrefはアンカー要素の必須属性であるため、それなしでは、すべてのブラウザーがそれを同等に処理することを期待できません。とにかく、ホバリング時にリンクにのみ下線を引きたいというコメントのどこかを読み、そうでない場合は読みません。以下を使用してこれを達成できます。これは、hover-classのリンクにのみ適用されます。

<a class="hover" href="">click</a>

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}
1
PatrikAkerstrand

以下を使用する必要があります。

a:hover {
    text-decoration: underline;
}

hoverはCSSの擬似クラスです。クラスを割り当てる必要はありません。

0
Alan Haggai Alavi

前回、Niceの欠陥に取り組んでいたのですが、AタグリンクとIEブラウザーに適切にホバープロパティを使用する方法について詳しく知りたいと思っていました。私にとって奇妙なことは、IEが単純なAセレクタに基づいてAタグリンク要素をキャプチャできなかったことです。そのため、Aタグ要素を強制的にキャプチャする方法を見つけ、より具体的なCSSセレクターを使用する必要があることに気付きました。以下に例を示します-それは完璧に動作します：

li a[href]:hover {...}
0
JPawelHeaven