it-swarm.com.de

Wie schreibe ich ein: hover in Inline-CSS?

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 a:hover in Inline-CSS innerhalb des HTML-Stilattributs verwenden?

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

868
Amr Elgarhy

Kurze Antwort: Das geht nicht.

Lange Antwort: Das solltest du nicht. 

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

:hover ist ein Pseudo-Selektor und hat für CSS nur innerhalb des Stylesheets Bedeutung. Es gibt kein Inline-Äquivalent (da die Auswahlkriterien nicht definiert werden). 

Antwort auf die Bemerkungen des OP:

Unter Totally Pwn CSS mit Javascript finden Sie ein gutes Skript zum dynamischen Hinzufügen von CSS-Regeln. Siehe auch Stylesheet ändern für einige Theorien zum Thema.

Vergessen Sie 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: Bei den obigen Angaben wird davon ausgegangen, dass es sich um einen Abschnitt head handelt. 

497

Sie können den gleichen Effekt erzielen, indem Sie Ihre Stile mit JavaScript in den Parametern onMouseOver und onMouseOut ändern. Dies ist jedoch äußerst ineffizient, wenn Sie mehrere Elemente ändern müssen:

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

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

372
Alex S

Sie könnten es tun irgendwann in der Vergangenheit. Aber jetzt (nach der neuesten Version desselben Standards, die die Empfehlung von Kandidaten ist) können Sie nicht .

48
Fahad Uddin

Ich bin extrem spät dazu beigetragen, aber ich war traurig, dass niemand dies vorgeschlagen hatte. Ich brauchte es für einige Hover-Buttons. 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: "Hintergrundfarbe: Rot;" Ist die Umschaltfarbe beim Hover, setzen Sie die gewünschte Farbe dort ein und dann funktioniert diese Lösung. Mir ist klar, dass dies hinsichtlich der Kompatibilität möglicherweise nicht die perfekte Lösung ist. Dies funktioniert jedoch, wenn dies unbedingt erforderlich ist.

32
lukesrw

mit Javascript:

a) Hinzufügen eines Inline-Stils 

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

b) oder etwas härtere 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: Multi-Word-Stile (dh .font-size) in Javascript werden zusammen geschrieben :

element.style.fontSize="12px"

28
T.Todua

Sie können nicht genau das tun, was Sie beschreiben, da a:hover Teil des Selektors ist, nicht die 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 in die Nähe kommen, da ein style-Set technisch fast überall eingesetzt werden kann:

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

Inline-Pseudoklassendeklarationen werden in der aktuellen CSS-Iteration nicht unterstützt (was ich jedoch verstehe, kann in einer zukünftigen Version erscheinen).

Für den Moment ist es am besten, einen Stilblock direkt über dem zu definierenden Link zu definieren:

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

Wie bereits erwähnt, können Sie keine beliebigen Inline-Stile für den Hover festlegen. Sie können jedoch den Stil des Hover-Cursors in CSS ändern, indem Sie Folgendes im entsprechenden Tag verwenden:

style="cursor: pointer;"
7
rutherford

Dies ist das beste Codebeispiel:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Vorschlag des Moderators: Halten Sie die Trennung der Bedenken aufrecht.

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

5
user1476842

Du kannst das. Nicht jedoch bei Inline-Styles. Sie können onmouseover und onmouseout Ereignisse verwenden:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

4
user9277191
<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover ist eine Pseudoklasse und kann daher nicht mit einem Stilattribut angewendet werden. Es ist Teil des Selektors.

4
Joel

Es gibt keine Möglichkeit, dies zu tun. Sie können einen JavaScript- oder einen CSS-Block verwenden.

Möglicherweise gibt es eine JavaScript-Bibliothek, die ein proprietäres Stilattribut in einen Stilblock konvertiert. Dann ist der Code jedoch nicht standardkonform.

4
m_vitaly

Entsprechend Ihren Kommentaren senden Sie trotzdem eine JavaScript-Datei. Führen Sie den Rollover in JavaScript aus. jQuery s $.hover()-Methode macht es ebenso einfach wie jeder andere JavaScript-Wrapper In direktem JavaScript ist es auch nicht zu schwer.

4
Vineel Shah

Ich habe gerade eine andere Lösung gefunden. 

Mein Problem: Ich habe ein <a>-Tag um einige Folien/Hauptinhalte und <a>-Tags in der Fußzeile. Ich möchte, dass sie an dieselbe Stelle im IE gehen, sodass der gesamte Absatz onHover unterstrichen wird, auch wenn es sich nicht um Links handelt: Die Folie als Ganzes ist ein Link. IE kennt den Unterschied nicht. Ich habe auch einige Links in meiner Fußzeile, die die Unterstreichung und Farbänderung onHover benötigen. Ich dachte, ich müsste Stile in die Fußzeilen-Tags setzen, um die Farbe zu ändern. Ratschläge von oben deuten darauf hin, dass dies unmöglich ist. 

Lösung: Ich habe den Fußzeilenlinks zwei verschiedene Klassen gegeben, und mein Problem wurde gelöst. Ich konnte die onHover-Farbänderung in einer Klasse haben, die Folien onHover keine Farbänderung/Unterstreichung haben und immer noch die externen HREFS in der Fußzeile und den Folien gleichzeitig haben! 

2
Liz

Ich stimme mit shadow überein. Sie können das Ereignis onmouseover und onmouseout verwenden, um CSS über JavaScript zu ändern. 

Und sagen Sie nicht, dass die Leute JavaScript aktiviert haben müssen. Es ist nur ein Stilproblem, es ist also egal, ob einige Besucher ohne JavaScript sind;) Obwohl die meisten Web 2.0 mit JavaScript arbeiten. Siehe Facebook zum Beispiel (viel JavaScript) oder Myspace .

1
Jaysn

Ich musste Javascript vermeiden, konnte aber mit serverseitigem Code arbeiten.

also habe ich eine ID generiert, einen Stilblock erstellt und die Verknüpfung mit dieser ID erstellt. Ja, es ist gültiges HTML. 

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

0
BananaAcid

Das war also nicht ganz das, wonach der Benutzer suchte, aber ich fand diese Frage auf der Suche nach einer Antwort und kam zu etwas Ähnlichem. Ich hatte eine Reihe von sich wiederholenden Elementen, die eine neue Farbe/einen neuen Schwebeflug für eine Registerkarte in ihnen benötigten. Ich verwende Lenker, die für meine Lösung von entscheidender Bedeutung sind. Andere Schablonensprachen können jedoch ebenfalls funktionieren. 

Ich habe einige Farben definiert und diese für jedes Element in die Lenker-Vorlage übernommen. Oben in der Vorlage habe ich ein Stil-Tag definiert und meine benutzerdefinierte Klasse und Schwebefarbe eingefügt.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Dann habe ich den Stil in der Vorlage verwendet:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Sie benötigen möglicherweise nicht den !important

0
webhound

Dies ist ziemlich spät im Spiel, aber wann würden Sie JavaScript in einer HTML-E-Mail verwenden? In der Firma, für die ich zurzeit arbeite (Reime mit Abodee), verwenden wir beispielsweise den kleinsten gemeinsamen Nenner für die meisten E-Mail-Marketing-Kampagnen - und JavaScript wird einfach nicht verwendet. Je. Es sei denn, Sie beziehen sich auf eine Art Vorverarbeitung.

Wie in einem verwandten Beitrag erwähnt: "Lotus Notes, Mozilla Thunderbird, Outlook Express und Windows Live Mail scheinen alle eine Art der Ausführung von JavaScript zu unterstützen. Nichts anderes tut es."

Link zu dem Artikel, aus dem das entnommen wurde: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Wie würde Hovering auch auf mobile Geräte übertragen? Deshalb mag ich die Antwort von oben: Long answer: you shouldn't. 

Wenn jemand mehr Einblick in dieses Thema hat, können Sie mich gerne korrigieren. Vielen Dank.

0
Shawn Spencer