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 die a:hover in Inline-CSS innerhalb des HTML-Style-Attributs?
Sie können z. B. keine CSS-Klassen in HTML-E-Mails verwenden.
Kurze Antwort: Sie können es nicht.
Lange Antwort: Sie sollten es nicht tun.
Geben Sie ihm einen Klassennamen oder eine ID und verwenden Sie Stylesheets, um den Stil anzuwenden.
:hover ist ein Pseudo-Selektor und für CSS hat nur innerhalb der Formatvorlage Bedeutung. Es gibt keine Entsprechung im Inline-Stil (da er nicht die Auswahlkriterien definiert).
Antwort auf die Kommentare des Auftraggebers:
Siehe _Total Pwn CSS mit Javascript für ein gutes Skript zum dynamischen Hinzufügen von CSS-Regeln. Siehe auch Stilvorlage ändern_ für einige der Theorien zu diesem Thema.
Vergessen Sie auch nicht, dass Sie Links zu externen Stylesheets hinzufügen können, wenn dies möglich 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: Die obigen Ausführungen setzen voraus, dass es eine Kopf Abschnitt.
Das Problem, dass ich nicht so tun können, ich bin Senden einer Javascript-Datei in http-Antwort und js erstellt den HTML-Code und die css inline, und kann nicht senden Sie eine andere Datei. ich weiß 100%, dass seine besser zu verwenden Stylesheet-Dateien
Sie können den gleichen Effekt erzielen, indem Sie Ihre Stile mit JavaScript in der onMouseOver y 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>Ich kann mich auch nicht mehr sicher erinnern, ob this funktioniert in diesem Zusammenhang. Möglicherweise müssen Sie es mit document.getElementById('idForLink') .
Das ist schlau! Funktioniert auch für einen Hover-Effekt der Hintergrundfarbe <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
Erstens: Danke, und zweitens: Gibt es einen geschickten Trick, um zu schreiben li.selected {...} auch in einem Inline-Stil?
Man muss darüber lachen, dass dies als "clever" angesehen wird :) Es ist schwer vorstellbar, dass es Leute gab, die nicht dabei waren, als dies die einzige Möglichkeit war, diesen Effekt zu erzielen. Oder noch schlimmer, ein "Bild" zu haben und das Bild auswechseln zu müssen, nur um den "Hover"-Effekt zu erzielen. Da fühle ich mich alt! Aber es reicht zu sagen, dass es die Frage des Auftraggebers beantwortet :)
Sie könnten es tun zu einem bestimmten Zeitpunkt in der Vergangenheit. Aber jetzt (nach der letzten Revision der gleichen Norm, die eine Kandidatenempfehlung ist) kann man nicht .
Alle anderen Antworten besagen, dass es nicht möglich ist, aber Ihre zeigen, dass es möglich ist, Ihre Antwort ist anders, ich teste sie.
Eigentlich brauchte ich das Gleiche wie Sie. Ich habe es getestet, aber es hat bei mir nicht funktioniert. Aber ich denke immer noch, es sollte funktionieren, wie seine von w3c.
Entschuldigung, ich habe gerade das Datum des Artikels überprüft. Er ist 10 Jahre alt. Es gibt also keine Garantie, dass er funktioniert. Wenn es funktioniert, sagen Sie es mir bitte auch.
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 für die Übereinstimmung von Elementen in einem XML-ähnlichen Dokument beschreibt.
Sie können sich jedoch annähern, denn ein style Set kann technisch fast überall eingesetzt werden:
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
Eigentlich geht das nicht: "HTML erlaubt eine beliebige Anzahl von STYLE-Elementen im HEAD-Bereich eines Dokuments." ( w3.org/TR/html4/present/styles.html#edef-STYLE )
Es scheint zwar unmöglich zu sein, eine Hover-Regel inline zu definieren, aber Sie können die Wert von Stilen unter Verwendung einer 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 eine Koexistenz mit anderen Regeln zur Änderung der Schwebefarbe mit geringer Spezifität zu ermöglichen. (z. B. durch einen CSS-Reset oder einige Elemente, die den Standardstil verwenden)
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
31 Stimmen
Auch die Einbettung von HTML in Blogging-Anwendungen erfordert häufig die ausschließliche Verwendung von Inline-Styles. Vor allem, wenn Sie die HTML-Datei über einen Drittanbieter-Client einbetten und keinen Zugriff auf die Themes des Benutzers haben.
11 Stimmen
Es gibt einen vorgeschlagenen CSS-Standard dafür; keine Ahnung, welche Art von Browser-Unterstützung es haben könnte (Hinweis: sie könnten die benutzerdefinierten Tags wie -moz, etc. verwenden): w3.org/TR/2002/WD-css-style-attr-20020515
1 Stimmen
Mögliche Duplikate von Ist es möglich, Inline-Pseudostile zu erstellen?
39 Stimmen
Ach, kommen Sie. Manchmal baut man nur einen Prototyp für eine Landing Page, und man möchte nicht die Stylesheets verzweigen oder einen neuen Vorlagenzweig erstellen müssen, nur um zu testen, ob die grüne Schaltfläche besser funktioniert. Verdammt.
2 Stimmen
@FriendlyNeighborhoodIdiot Diese Seite ist 13 Jahre alt, der Entwurf wurde seitdem aufgegeben.
2 Stimmen
Ich sehe, dass keine der Antworten auf den Anwendungsfall HTML-E-Mail eingeht. In der Tat können Sie für diesen Fall Standard-CSS (eingebettet) verwenden. Nicht jeder E-Mail-Client kann es akzeptieren, aber viele tun.
0 Stimmen
Welche Lösung Sie auch immer wählen, vergessen Sie nicht, auch eine
:focusStil, der für Tastatur- und Bildschirmleser sehr wichtig ist.