it-swarm.com.de

Verwendung von "hover" in CSS

Ich habe den folgenden Code verwendet, um dieses Ziel zu erreichen:

Wenn sich die Maus auf dem Anker befindet, kommt die Unterstreichung heraus.

aber es hat nicht funktioniert,

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

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

Was ist die richtige Version dafür?

29
omg

Wenn Sie möchten, dass die Unterstreichung angezeigt wird, während sich der Mauszeiger über dem Link befindet, gilt Folgendes:

a:hover {text-decoration: underline; }

ist ausreichend, Sie können jedoch auch den Klassennamen 'hover' verwenden, wenn Sie möchten, und das Folgende wäre gleichermaßen anwendbar:

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

Im Übrigen lohnt es sich zu erwähnen, dass der Klassenname 'hover' dem Element nicht wirklich etwas hinzufügt, da das Psuedo-Element von a:hover dasselbe tut wie das von a.hover:hover. Es sei denn, es ist nur eine Demonstration der Verwendung eines Klassennamens.

34
David Thomas

Es gibt viele Möglichkeiten, dies zu tun ... Wenn Sie wirklich eine 'hover'-Klasse in Ihrem A-Element haben möchten, müssen Sie Folgendes tun:

a.hover:hover { code here }

Andererseits ist es ungewöhnlich, einen solchen Klassennamen dort zu haben. So machen Sie einen normalen Schwebeflug:

select:hover { code here }

Hier einige weitere Beispiele:

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 ist eine der vielen Pseudoklassen.

Sie können beispielsweise die Form eines Elements ändern, wenn Sie mit der Maus darüber fahren, wenn Sie darauf klicken und wenn Sie zuvor darauf geklickt haben.

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; }

Abgesehen von den unbequemen Farben, die ich als Beispiel gegeben habe, ist der Link zur 'home'-Klasse standardmäßig rot, grün, wenn die Maus sie zeigt, blau, wenn sie angeklickt werden, und schwarz, nachdem sie angeklickt wurden.

Hoffe das hilft

7
SirCommy

Keine Antwort, sondern eine Erklärung, warum Ihre CSS nicht mit HTML übereinstimmt.

In css wird der Raum als Trennzeichen verwendet, um den Browser anzuweisen, in untergeordneten Objekten zu suchen, also in Ihrer css

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

bedeutet "nach einem Element suchen, dann nach Nachkommen davon suchen, die eine Schwebeklasse haben und nach Nachkommen dieser Nachkommen suchen, die über einen Schwebeflug verfügen" und dieses Markup entsprechen würden

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

Wenn Sie mit <a class="hover">I will become underlined when you hover on me</a> übereinstimmen möchten, sollten Sie a.hover:hover verwenden. Dies bedeutet "Suchen Sie nach einem Element mit Klassenhover und mit dem Hover-Status".

6
valentinas

a.hover: schweben

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

Sie müssen den Selector und den Pseudo-Selector verketten. Sie benötigen auch ein Stilelement, um Ihre Stile aufzunehmen. Die meisten Benutzer verwenden ein externes Stylesheet für viele Vorteile (Zwischenspeicherung für einen).

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

<style type="text/css">

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

    }

</style>

Nur eine Anmerkung: Die Hover-Klasse ist nicht erforderlich, es sei denn, Sie definieren nur bestimmte Links, um dieses Verhalten zu haben (was der Fall sein kann)

2
alex

Die href ist ein erforderliches Attribut eines Ankerelements. Ohne sie können Sie also nicht von allen Browsern erwarten, dass sie gleich behandelt werden. Wie dem auch sei, ich habe irgendwo in einem Kommentar gelesen, dass der Link beim Schweben nur unterstrichen werden soll und nicht anders. Sie können Folgendes verwenden, um dies zu erreichen, und es gilt nur für Links mit der hover - Klasse:

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

a.hover {
    text-decoration: none;
}

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

Sie sollten verwendet haben:

a:hover {
    text-decoration: underline;
}

hover ist eine Pseudoklasse in CSS. Sie müssen keine Klasse zuordnen.

0

Ich habe das letzte Mal an einem Nice-Fehler gearbeitet und habe mich mehr darüber gefragt, wie man die Hover-Eigenschaft für einen Tag-Link und für den IE - Browser richtig verwendet. Ein seltsames Ding war für mich, dass IE nicht der Fall war In der Lage, ein Tag-Link-Element zu erfassen, das auf einem einfachen A-Selektor basiert ..__ Also habe ich herausgefunden, wie man das Capturing A-Tag-Element erzwingen kann, und habe festgestellt, dass wir einen spezifischeren CSS-Selector verwenden müssen. Hier ist ein Beispiel - Es funktioniert perfekt:

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