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

Ich bin extrem spät einen Beitrag zu diesem, aber ich war traurig zu sehen, niemand vorgeschlagen, wenn Sie tatsächlich Inline-Code benötigen, ist dies möglich zu tun. 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 ist es der Inline-Code: "background-color: red;" ist die Umschaltfarbe bei Hover, fügen Sie die Farbe, die Sie brauchen, dort ein und dann funktioniert diese Lösung. Ich weiß, dass dies vielleicht nicht die perfekte Lösung in Bezug auf die Kompatibilität ist, aber es funktioniert, wenn es absolut notwendig ist.

Answer 2

Mit Javascript:

a) Hinzufügen eines Inline-Stils

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: Mehrwortstile (d. h. font-size ) in Javascript werden zusammen geschrieben :

element.style.fontSize="12px"

Answer 3

Dies ist das beste Beispiel für einen Code:

<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: Behalten Sie die Trennung Ihrer Anliegen bei.

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'
}

Answer 4

Wie bereits erwähnt, können Sie keine beliebigen Inline-Stile für Hover festlegen, aber Sie können den Stil des Hover-Cursors in CSS mit dem folgenden Text im entsprechenden Tag:

style="cursor: pointer;"

Answer 5

Inline-Pseudoklassendeklarationen werden in der aktuellen Iteration von CSS nicht unterstützt (obwohl, soweit ich weiß, dies in einer zukünftigen Version möglich sein wird).

Im Moment 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="http://stackoverflow.com/foo" class="myLinkClass">Foo!</a>