Siempre puede agregar una regla de estilo individual a una hoja de estilos existente, en lugar de crear un nuevo elemento de estilo. Algo a lo largo de las líneas de:
function addStyle() {
var style = document.styleSheets[0]; //select style sheet (0==first)
var styleSel = ".class:hover"; //define selector
var styleDec = "color: red;"; //define declaration
if(style.insertRule) { //for modern, DOM-compliant browsers
style.insertRule(styleSel+'{'+styleDec+'}', style.cssRules.length);
//I chose to do it this way to more easily support the addRule method, but
//know that insertRule only needs two parameters, full style rule
//(selector+prop/value declarations), and index to insert rule at
// styleSheets[0].insertRule(rule, index);
}else { //for IE < 9
style.addRule(styleSel, styleDec, -1);
}
}
que adaptó el example at MDN
Esto supone que está utilizando una clase (que ya está definido y aplicado) para agregar el: hover pseudo-selector para, pero podría hacerlo con la misma facilidad ser un identificador o selector de elementos.
Si no pudo agregar una clase o regla de estilo de antemano, también podría hacerlo de forma dinámica de la misma manera (definir clase, definir clase: desplazarse, luego aplicar clase a los elementos deseados).
'onmouseover' es lo mismo que' hover'; puedes adjuntar ese evento y simplemente agregar una clase, y a través del estilo CSS de esa clase. Tiene una mayor reutilización. – Zirak
¿Por qué simplemente no definirlo en un css normal y cambiar solo la clase en javascript? – Dmitry
@Zirak, casi. ': hover' solo funciona en las etiquetas' 'en IE6, pero' onmouseover' funciona en prácticamente todos los elementos. Son similares, pero no son lo mismo. – Blender