¿Cómo puedo establecer un css ": hover" en un elemento creado DOM en JavaScript?

Question

Estoy usando DOM para administrar una respuesta JSON desde una función AJAX que estoy ejecutando. El guión que estoy escribiendo debe ser completamente portátil, por lo que estoy definiendo los estilos para los elementos creados sobre la marcha (es decir, sin vínculos a un CSS externo, y sin proporcionar CSS en el documento HTML en sí, porque no lo haré). tener control del doc).

Me gustaría crear un efecto de desplazamiento sobre algunos de los elementos.

ejemplo:

 #myDiv:hover { background:#000000; }

¿Hay una manera de definir que en el DOM? ¿O tengo que usar mouseover?

Answer 1

Puede crear y manipular dinámicamente hojas de estilo. See here para algunos de los problemas de navegadores cruzados con este enfoque.

Tengo una función de envoltura lying around que funciona en algunos de ellos; usarlo, el código se lee

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

Answer 2

puede crear elemento con clase predefinida:

.h:hover{color: #c00} 

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