Ist es möglich, Inline-Pseudo-Stile zu erstellen?

Question

Ist es möglich, Inline-Pseudo-Stile zu erstellen?

Zum Beispiel kann ich etwas wie folgt tun?

<a href="#" style="background-color:green;{hover:background-color:red;}">Coding Horror</a> 

Der Grund dafür ist, dass ich eine .NET Bibliothek zu entwickeln, die UI-Elemente erzeugt. Ich möchte HTML-Elemente erstellen, deren Hover-Status ohne Verwendung eines externen Stylesheets festgelegt werden kann.

Answer 1

Leider nein, Sie können keine Hover-Effekte mit Inline-CSS implementieren.

Eine (schlechte) Problemumgehung für dieses Problem besteht darin, dass Ihre Steuerelemente Stilblöcke beim Rendern darstellen. Zum Beispiel könnten Sie Ihre Steuer machen, wie:

<style type="text/css"> 
    .custom-class { background-color:green; } 
    .custom-class:hover { background-color:Red; } 
</style> 
<a href="#" class="custom-class">Coding Horror</a> 

Wenn Sie Ihre Benutzer zwingen könnte, einen „Stil Kontrolle“ an der Spitze ihrer Seiten löschen Sie alle benutzerdefinierten Klassen machen könnte es statt wodurch sie neben jedem Kontrolle, was eine sehr, sehr schlechte Sache wäre (Browser werden das Rendern jedes Mal neu starten, wenn sie auf einen Stilblock stoßen, eine Menge von Stilblöcken, die um Ihre Seite verstreut sind, wird langsames Rendern verursachen).

Leider gibt es keine elegante Lösung für dieses Problem.

Answer 2

Oder Sie können die jQueryhover Funktion verwenden und die Hintergrundfarbe einstellen.

Answer 3

Dies ist eine Art Catch-22-Situation.

Auf der einen Seite können Sie einen Stilblock direkt vor dem Punkt einfügen, an dem Ihr Element in die Seite eingefügt wird, aber Chris Pebble weist auf die Probleme hin. (Wenn Sie sich dafür entscheiden, stellen Sie sicher, dass Sie eindeutige IDs für Ihre Elemente auswählen, damit Ihre Selektoren nicht versehentlich etwas anderes auswählen oder stylen).

Auf der anderen Seite könnte man so etwas tun:

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a> 

Aber, das in seinem eigenen Recht böse ist, wie es Markup zusammenhält, Präsentation, Verhalten und eine ganze Reihe anderer Dinge.

Sie könnten auch ein Stylesheet in die Seite einfügen, indem Sie ein Link-Tag schreiben oder document.stylesheets manipulieren, aber das wird einen Download auslösen.

Ich habe in der Regel die erste Methode (Hinzufügen eines Stilblocks) auf große getan. "Modulare" Portalseiten tun dies, also ist es vielleicht der De-facto-Standard (es ist zumindest lesbarer und vielleicht einfacher zu pflegen als dort JavaScript zu stempeln?). Die JavaScript-Methode scheint am wenigsten Einfluss auf das DOM und die gesamte Seite zu haben, da Sie Ihre Präsentation für sich behalten.

Dies ist eine dieser Front-End-Dev Morases, wo jede Antwort, die Sie wählen, in gewissem Maße falsch ist, also wägen Sie die Optionen ab und wählen Sie aus, was am einfachsten zu bauen und zu warten ist.

Answer 4

Ich würde dynamisch eine CSS-Datei erstellen, während ich alle Steuerelemente analysiere, und ich würde ein serverseitiges Attribut zu den Steuerelementen hinzufügen, die den Hover oder andere Pseudoklassenstile enthalten.

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a> 

Ihr Code kann für diese Attribute aussieht und eine CSS-Datei on the fly

#a1:hover { 
    color:blue 
} 

Ich weiß nicht generieren, wenn .NET für Sie diese Art der Analyse des Attributs erlaubt, zu tun, aber ich mache etwas ähnliches in einem Rahmen, den ich für PHP erstellt habe.