Frage Wie schreibe ich einen: Hover in Inline-CSS?


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

Wie kann ich verwenden? a:hover Inline-CSS innerhalb des HTML-Style-Attributs?

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


800
2018-06-23 15:07


Ursprung


Antworten:


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 ist ein Pseudo-Selektor und z CSS, hat nur Bedeutung innerhalb des Stylesheets. Es gibt keine Entsprechung im Inline-Stil (da es die Auswahlkriterien nicht definiert).

Antwort auf die Bemerkungen des OP:

Sehen Totally 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. Beispielsweise,

<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 nimmt an, dass es a Kopf Sektion.


464
2018-06-23 15:09



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

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

Außerdem kann ich mich nicht sicher erinnern, ob this arbeitet in diesem Zusammenhang. Möglicherweise müssen Sie es mit wechseln document.getElementById('idForLink').


334
2018-06-23 15:16



Genauer gesagt, Du könntest es tun irgendwann in der Vergangenheit. Aber jetzt (nach der neuesten Revision des gleichen Standards, die Candidate Recommendation ist) können Sie nicht     ...


44
2018-03-27 05:59



Ich habe sehr spät dazu beigetragen, aber ich war traurig zu sehen, dass niemand dies vorgeschlagen hat, wenn Sie tatsächlich Inline-Code benötigen, ist dies möglich. Ich brauchte es für einige Hover Buttons, die Methode ist dies:

.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 der Inline-Code: "background-color: red;" ist die Farbe des Schalters bei Hover, setze die Farbe, die du brauchst, und dann funktioniert diese Lösung. Ich weiß, dass dies nicht die perfekte Lösung in Bezug auf die Kompatibilität ist, aber das funktioniert, wenn es unbedingt benötigt wird.


32
2017-08-10 09:41



Du kannst nicht genau das tun, was du beschreibst, seit 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 jedoch nahe kommen, weil a style Set kann technisch am meisten überall hingehen:

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

26
2018-06-23 15:10



1) Hinzufügen von Inline-Stil mit Javascript:

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

oder eine etwas härtere Methode:

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',''); };

2) Mehrwort-Stile in Javascript:

element.style.fontSize="12px"


24
2017-07-22 08:33



Inline-Pseudoklassendeklarationen werden in der aktuellen Iteration von CSS nicht unterstützt (obwohl, wie ich es verstehe, es in einer zukünftigen Version vorkommen könnte).

Momentan ist es wahrscheinlich am besten, einen Stilblock direkt über dem Link zu definieren, den Sie gestalten möchten:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

10
2018-06-23 15:11