Wie kann ich ‘a:hover’ in Inline-CSS schreiben?

Lesezeit: 8 Minuten

Benutzeravatar von Amr Elgarhy
Amr Elgarhy

Ich habe einen Fall, in dem ich Inline-CSS-Code schreiben muss, und ich möchte einen Hover-Stil auf einen Anker anwenden.

Wie kann ich verwenden a:hover in Inline-CSS innerhalb des HTML-Stilattributs?

Beispielsweise können Sie CSS-Klassen nicht zuverlässig in HTML-E-Mails verwenden.

  • Das Einbetten von HTML in Blogging-Anwendungen erfordert oft auch die ausschließliche Verwendung von Inline-Stilen. Vor allem, wenn Sie den HTML-Code über einen Drittanbieter-Client einbetten und keinen Zugriff auf die Themen des Benutzers haben.

    – Vorsehung

    19. Juli 2011 um 8:50 Uhr

  • Dafür gibt es einen vorgeschlagenen CSS-Standard; keine Ahnung, welche Art von Browserunterstützung es haben könnte (Hinweis: Sie könnten die benutzerdefinierten Tags wie -moz usw. verwenden): w3.org/TR/2002/WD-css-style-attr-20020515

    – Kat

    10. August 2011 um 17:37 Uhr


  • Ach komm schon. Manchmal erstellen Sie nur einen Landingpage-Prototypen und möchten nicht die Stylesheets forken oder einen neuen Template-Zweig erstellen oder was auch immer, nur um zu testen, ob der grüne Button besser funktioniert. Meine Güte.

    – ElBel

    26. Juli 2013 um 23:08 Uhr

  • @FriendlyNeighborhoodIdiot Diese Seite ist 13 Jahre alt, der Entwurf wurde seitdem aufgegeben.

    – Tofandel

    14. September 2014 um 21:40 Uhr

  • Ich sehe, dass keine der Antworten auf den HTML-E-Mail-Anwendungsfall reagiert. In diesem Fall können Sie tatsächlich standardmäßiges (eingebettetes) CSS verwenden. Nicht jeder E-Mail-Client akzeptiert es, aber viele tun es.

    – Nathan

    21. Februar 2020 um 6:39 Uhr

Benutzeravatar von Jonathan Fingland
Jonathan Finland

Kurze Antwort: Sie können nicht.

Lange Antwort: Sie sollten nicht.

Geben Sie ihm einen Klassennamen oder eine ID und verwenden Sie Stylesheets, um den Stil anzuwenden.

:hover ein Pseudo-Selektor ist und z CSS, hat nur innerhalb des Stylesheets eine Bedeutung. Es gibt kein Äquivalent im Inline-Stil (da es die Auswahlkriterien nicht definiert).

Antwort auf die Kommentare des OP:

Sehen Völlig Pwn CSS mit Javascript für ein gutes Skript zum dynamischen Hinzufügen von CSS-Regeln. Siehe auch Stylesheet ändern für einige der Theorie zu diesem Thema.

Vergessen Sie auch nicht, dass Sie Links zu externen Stylesheets hinzufügen können, wenn dies eine Option ist. Zum Beispiel,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Achtung: Das Obige setzt voraus, dass es eine gibt Kopf Sektion.

  • Sie können CSS-Klassen in Javascript hinzufügen

    – Jonathan Finland

    23. Juni 2009 um 15:13 Uhr

  • Es gibt andere Umstände, in denen Inline-CSS das ist nur Option – wie HTML-E-Mails (z. B. Gmail ignoriert CSS, es sei denn, es ist inline). Da Javascript auch in den meisten E-Mail-Clients entfernt wurde, habe ich leider noch keine Möglichkeit gefunden, :hover-Effekte hinzuzufügen.

    – Simon Osten

    1. November 2010 um 2:24 Uhr

  • @Kato Das ist zwar ein großartiger Link, und ich wünschte wirklich, es würde funktionieren, aber leider nicht. Nur zur Bestätigung habe ich die Syntax getestet style="{color:green;} :hover { color: red; }" und Firefox hat es geschafft, den Link grün zu färben, aber den Hover ignoriert. Chrome ignoriert beides. Weitere Tests wären ziemlich sinnlos.

    – Jonathan Finland

    4. Oktober 2011 um 16:30 Uhr

  • Ich habe es nicht als funktionierende Lösung angegeben. Ich sagte, es sei nicht “ganz” richtig zu sagen, dass es kein Inline-Äquivalent gibt und dass Pseudo-Selektoren außerhalb von Stylesheets keine Bedeutung haben. Wie ist das unangemessen?

    – Kat

    21. Oktober 2011 um 21:24 Uhr


  • Warum lange Antwort ist Das solltest du nicht… du … du solltest nicht verallgemeinern. Ich habe versucht, E-Mail-Nachrichten mit HTML zu senden, aber wissen Sie was … Google Mail entfernt alle Stil-Tags, alle externen Stilreferenzen und alle Skripte. Also … gibt es eine Möglichkeit, die Hover-Farbe von Links in E-Mails zu gestalten, die an Google Mail gesendet werden? Hoffentlich… die Hoffnung stirbt zuletzt!!! =)

    – Miguel Angelo

    22. Februar 2013 um 2:35 Uhr

Benutzeravatar von Alex S
Alex S

Sie können den gleichen Effekt erzielen, indem Sie Ihre Stile mit JavaScript in ändern onMouseOver und onMouseOut Parameter, obwohl es extrem ineffizient ist, wenn Sie mehr als ein Element ändern müssen:

<a href="https://stackoverflow.com/questions/1033156/abc.html"
   onMouseOver="this.style.color="#0F0""
   onMouseOut="this.style.color="#00F"" >Text</a>

Ich kann mich auch nicht mehr genau erinnern, ob this arbeitet in diesem Zusammenhang. Möglicherweise müssen Sie es mit wechseln document.getElementById('idForLink').

  • das ist Schlau! Funktioniert auch für einen Hintergrundfarben-Hover-Effekt <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...

    – mxro

    8. Januar 2013 um 3:52 Uhr

  • Zuerst danke, und dann gibt es einen cleveren Trick zum Schreiben li.selected {...} auch im Inline-Stil?

    – Trost

    9. August 2014 um 17:25 Uhr


  • Muss darüber lachen, dass dies als “clever” angesehen wird 🙂 Es ist schwer vorstellbar, dass einige Leute nicht da waren, als dies die prominente/einzige Möglichkeit war, diesen Effekt zu erzielen. Oder schlimmer noch, ein ‘Bild’ zu haben und das Bild austauschen zu müssen, nur um den ‘Hover’-Effekt zu erzielen. Fühle mich alt! Aber es genügt zu sagen, dass es die Frage des OP beantwortet 🙂

    – Manachi

    22. Dezember 2014 um 1:40 Uhr

  • Da muss ich Manachi zustimmen. Das ist wie eine Rückblende in die Geocities der 90er, javascript ;P

    – Eric Castro

    11. Mai 2015 um 14:43 Uhr

  • Ich musste dies für eine E-Mail tun und es hat funktioniert. Danke schön! Dies löst die Frage tatsächlich, im Gegensatz zur akzeptierten Antwort.

    – theUtherSide

    20. Juli 2018 um 16:53 Uhr

Du könntest es tun irgendwann in der Vergangenheit. Aber jetzt (gemäß der letzten Überarbeitung desselben Standards, der Kandidatenempfehlung) können Sie nicht mehr .

  • Alle anderen Antworten sagten, dass es nicht möglich ist, aber Ihre zeigen, dass es möglich ist, Ihre Antwort ist anders, ich teste es.

    – Amr Elgarhy

    27. März 2012 um 12:18 Uhr

  • Entschuldigung, ich habe gerade das Datum des Artikels überprüft. Es ist 10 Jahre alt. Es gibt also keine Garantie, dass es funktionieren sollte. Wenn ja, sag es mir bitte auch.

    Benutzer379888

    27. März 2012 um 12:27 Uhr

  • Ich habe das getestet: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> Aber es hat nicht funktioniert

    – Amr Elgarhy

    27. März 2012 um 12:45 Uhr


  • Falls jemand auf diese Antwort stößt, hat der Beantworter hier eine Frage zu dieser Funktion gestellt: stackoverflow.com/questions/9884182/…

    – BoltClock

    27. Juni 2012 um 16:18 Uhr

  • Genauer gesagt, Sie könnte tun es irgendwann in der Vergangenheit. Aber jetzt (gemäß der letzten Überarbeitung desselben Standards, der Kandidatenempfehlung) du kannst nicht.

    – Ilja Streltsyn

    4. Juli 2013 um 23:00 Uhr

Benutzeravatar von Rex M
Rex M

Sie können nicht genau das tun, was Sie beschreiben, da a:hover ist Teil des Selektors, nicht der CSS-Regeln. Ein Stylesheet besteht aus zwei Komponenten:

selector {rules}

Inline-Stile haben nur Regeln; der Selektor ist implizit das aktuelle Element.

Der Selektor ist eine ausdrucksstarke Sprache, die eine Reihe von Kriterien beschreibt, um Elemente in einem XML-ähnlichen Dokument abzugleichen.

Sie können sich jedoch nähern, weil a style set kann technisch fast überall hingehen:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

Benutzeravatar von lukesrw
Lukasrw

Wenn Sie tatsächlich Inline-Code benötigen, ist dies möglich. Ich brauchte es für einige Hover-Buttons, und die Methode ist folgende:

.hover-item {
    background-color: #FFF;
}

.hover-item:hover {
    background-color: inherit;
}
<a style="background-color: red;">
    <div class="hover-item">
        Content
    </div>
</a

In diesem Fall ist der Inline-Code: “background-color: red;” ist die Schalterfarbe beim Hover. Verwenden Sie die Farbe, die Sie benötigen, und dann funktioniert diese Lösung. Mir ist klar, dass dies in Bezug auf die Kompatibilität möglicherweise nicht die perfekte Lösung ist, aber dies funktioniert, wenn es unbedingt benötigt wird.

  • Danke schön. Das ist eine großartige Antwort, ich denke, diese Antwort muss eine Lösung sein.

    – Hovhannes Sargsyan

    1. September 2015 um 6:17 Uhr

  • Nein, OP sagte, sie wollten es in Inline-CSS innerhalb des HTML-Stilattributs.

    – Redomann

    5. April 2016 um 21:15 Uhr

  • Ich weiß, jj_- aber mit dieser Methode können Sie nur ein paar Zeilen in das CSS einfügen und es an vielen Stellen immer wieder verwenden. Viele Leute (mich eingeschlossen) haben festgestellt, dass dies eine hilfreiche Alternative ist.

    – lukasrw

    7. April 2016 um 2:24 Uhr

  • Dies ist nur der “normale” Weg, von dem alle sagten, dass er der richtige Weg ist. Es ist jedoch kein Inline-Weg, was die ursprüngliche OP-Anfrage war.

    – wcndave

    2. November 2018 um 13:59 Uhr

  • Die Frage zum Inline-Stil wurde aus einem bestimmten Grund gestellt, Sie haben den Inline-Stil nicht verwendet.

    – Shinzu

    9. Dezember 2018 um 15:56 Uhr

Benutzeravatar von Peter Mortensen
Peter Mortensen

Verwendung von JavaScript:

a) Inline-Stil hinzufügen

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) oder eine etwas schwierigere Methode – Hinzufügen von “Mouseover”

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Hinweis: Stile mit mehreren Wörtern (dhfont-size) in JavaScript werden zusammen geschrieben:

element.style.fontSize="12px"

  • Danke schön. Das ist eine großartige Antwort, ich denke, diese Antwort muss eine Lösung sein.

    – Hovhannes Sargsyan

    1. September 2015 um 6:17 Uhr

  • Nein, OP sagte, sie wollten es in Inline-CSS innerhalb des HTML-Stilattributs.

    – Redomann

    5. April 2016 um 21:15 Uhr

  • Ich weiß, jj_- aber mit dieser Methode können Sie nur ein paar Zeilen in das CSS einfügen und es an vielen Stellen immer wieder verwenden. Viele Leute (mich eingeschlossen) haben festgestellt, dass dies eine hilfreiche Alternative ist.

    – lukasrw

    7. April 2016 um 2:24 Uhr

  • Dies ist nur der “normale” Weg, von dem alle sagten, dass er der richtige Weg ist. Es ist jedoch kein Inline-Weg, was die ursprüngliche OP-Anfrage war.

    – wcndave

    2. November 2018 um 13:59 Uhr

  • Die Frage zum Inline-Stil wurde aus einem bestimmten Grund gestellt, Sie haben den Inline-Stil nicht verwendet.

    – Shinzu

    9. Dezember 2018 um 15:56 Uhr

Benutzeravatar von Peter Mortensen
Peter Mortensen

Es scheint zwar unmöglich zu sein, eine Hover-Regel inline zu definieren, aber Sie können die Wert von Stilen inline mit einem CSS Variable:

:hover {
  color: var(--hover-color);
}
<a style="--hover-color: green">
    Library
</a>

Erwägen Sie die Verwendung eines Attributs oder einer Klasse zusätzlich zum Selektor (z. B. [hover-color]:hover), um die Koexistenz mit anderen Hover-Farbänderungsregeln mit geringer Spezifität zu ermöglichen (z. B. von einem CSS-Reset oder einigen Elementen, die den Standardstil verwenden).

1437170cookie-checkWie kann ich ‘a:hover’ in Inline-CSS schreiben?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy