Wie schreibt man ein:hover in Inline-CSS?

Question

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.

Answer 1

Sie können einfach eine Inline-Stylesheet-Anweisung wie diese verwenden:

<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>

Answer 2

Das ist jetzt möglich mit Hacss .

Answer 3

Sie können id durch Hinzufügen einer Klasse machen, aber niemals inline.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 Zeilen, aber Sie können die Klasse überall wiederverwenden.

Answer 4

Sie können die Pseudoklasse a:hover nur in externen Stilvorlagen. Daher empfehle ich die Verwendung einer externen Formatvorlage. Der Code lautet:

a:hover {color:#FF00FF;}   /* Mouse-over link */

Answer 5

Ich musste Javascript vermeiden, konnte aber mit serverseitigem Code arbeiten. Ich hatte nur an einer Stelle Zugriff auf ein Array von Elementen, wo dieser Code aufgerufen wurde. Es musste mit bestehenden JavaScript arbeiten, damit das Datenattribut nicht stört.

Ich habe also eine im data-Attribut gespeicherte ID erzeugt, einen Stilblock erstellt und den Link mit dieser ID erzeugt. Ja, das ist gültiges HTML. Nur nicht die beste Praxis.

/* for the demo code here */
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>