30

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

アンカーにマウスを乗せると下線が出て、

しかし、それはうまくいきませんでした、

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

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

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

4

9 に答える 9

35

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

a:hover {text-decoration: underline; }

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

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

ちなみに、'hover' のクラス名は要素に実際には何も追加しないことを指摘しておく価値があるかもしれませa:hoverんa.hover:hover。クラス名を使用する単なるデモンストレーションでない限り。

于 2009-05-25T01:28:05.857 に答える
7

それには多くの方法があります。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; }

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

お役に立てれば

于 2012-09-29T17:58:37.150 に答える
6

答えではありませんが、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。これは、「クラスホバーとホバー状態を持つ要素を探す」ことを意味します。

于 2013-01-28T03:39:49.197 に答える
4 
a.hover:hover {
    text-decoration:underline;
}
于 2009-05-25T01:28:11.223 に答える
4

a.hover:ホバー

于 2009-05-25T01:27:40.990 に答える
2

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

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

<style type="text/css">

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

    }

</style>

注意: hover クラスは、特定のリンクのみがこの動作をするように定義している場合を除き (場合によっては) 必要ありません。

于 2009-05-25T01:28:18.493 に答える
1

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

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

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}
于 2009-07-03T14:06:34.113 に答える
0

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

a:hover {
    text-decoration: underline;
}

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

于 2009-05-25T01:28:33.097 に答える
0

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

li a[href]:hover {...}
于 2013-12-02T11:06:26.527 に答える