Wie kann ich ein CSS ": Hover" auf ein DOM-Element in JavaScript setzen?

Question

Ich verwende das DOM, um eine JSON-Antwort von einer AJAX-Funktion zu verwalten, die ich ausführe. Das Skript, das ich schreibe, muss vollständig portierbar sein, daher definiere ich die Stile für die erstellten Elemente im Handumdrehen (das heißt, keine Verknüpfung mit einem externen CSS und keine Bereitstellung von CSS im HTML-Dokument selbst, weil ich es nicht tun werde) habe die Kontrolle über das Dokument).

Ich möchte einen Hover-Effekt auf einige der Elemente erstellen.

Beispiel:

 #myDiv:hover { background:#000000; }

Gibt es eine Möglichkeit, dass im DOM zu definieren? Oder muss ich mouseover verwenden?

Answer 1

Sie können Stylesheets dynamisch erstellen und bearbeiten. See here für einige der Cross-Browser-Probleme mit diesem Ansatz.

Ich habe eine Wrapper-Funktion lying around, die um einige von ihnen funktioniert; Mit ihr würde der Code

document.createStyleSheet().addRule('#myDiv:hover', 'background:#000000;'); 

Answer 2

lesen Sie Element mit vordefinierten Klasse erstellen kann:

.h:hover{color: #c00} 

var elem = document.createElement('div'); 
elem.className = 'h'