So entfernen Sie beim Hover die Unterstreichung eines Namens

123

Ich habe so ein HTML:

<legend class="green-color"><a name="section1">Section</a></legend>

legend.green-color{
    color:green;
}

In meinem Fall Sectionsieht es grün aus, aber wenn ich einen Mauszeiger darauf setze, sieht es aus wie ein href, aber ich möchte, dass es genauso bleibt, ohne zu unterstreichen und die Farbe zu ändern.

Ist es möglich, ohne Änderung von CSS oder mit minimalem CSS-Aufwand zu erreichen?

oder kann irgendwie mit jquery sein?

html css Joper
quelle

Antworten:

225

Versuche dies:

legend.green-color a:hover{
    text-decoration: none;
}
Harry Joy
quelle
20
Zu Ihrer Information für Leute, die Bootstrap verwenden ... Ich musste "! Important" nach "none" verwenden, damit dies funktioniert. Beispiel: a: hover {Textdekoration: keine! Wichtig; }
JustBlossom
19

Entfernen Sie die Textdekoration für das Ankertag

<a name="Section 1" style="text-decoration : none">Section</a>
Adithya Surampudi
quelle
4
Es wird als schlechte Praxis angesehen, Inline-Stile zu verwenden. Es ist besser, HTML von Stilen zu trennen, um die Wartungsarbeiten später zu reduzieren.
7
Ich möchte hier keinen Flammenkrieg auslösen, aber ich mag diesen Inline-Stil. Ich meine, meine HTML-Datei benötigt diese Art von Stil nur ein oder zwei Mal. Ich sehe die Zeit nicht als gerechtfertigt an, wenn ein separates Stylesheet erstellt wird, selbst wenn die Trennung eine gute Praxis ist.
user3454439
6

Sie können CSS unter verwenden, legend.green-color a:hoverum dies zu tun.

legend.green-color a:hover {
    color:green;
    text-decoration:none;
}
Kleiner Hadron Collider
quelle
5

So behalten Sie die Farbe bei und verhindern eine Unterstreichung des Links:

legend.green-color a{
    color:green;
    text-decoration: none;
}
Chris
quelle
3

Sie können dem jeweiligen Link eine ID zuweisen und CSS hinzufügen. Siehe die folgenden Schritte:

1. Fügen Sie eine ID Ihrer Wahl hinzu (muss ein eindeutiger Name sein; kann nur mit Text beginnen, nicht mit einer Zahl):

<a href="/abc/xyz" id="smallLinkButton">def</a>

  1. Fügen Sie dann das erforderliche CSS wie folgt hinzu:

    #smallLinkButton:hover,active,visited{

      text-decoration: none;
      }
Raymond Wachaga
quelle
2 

legend.green-color{
    color:green !important;
}
Erweitern Sie das Snippet

BaiJiFeiLong
quelle