establecer el estilo con: hover javascript

Question

Entiendo que el siguiente método es excelente para configurar estilos CSS debido a la compatibilidad del navegador.

element.style.cssText = "color:red;"; 

Lo que no puedo hacer es usar cssText para aplicar estilos en los eventos :hover y :focus CSS.
¿Qué hago en lugar de esto?

element.style.cssText = ":focus{color:red;}"; 

P.S. (. No se ajusta a mi situación) no mencionan el uso de eventos de javascript como onmouseover en lugar de la CSS :hover

Answer 1

Puede hacerlo con un poco de magia vudú:

var head = document.getElementsByTagName('head')[0]; 
var style = document.createElement('style'); 
var declarations = document.createTextNode('selector:pseudo { property: value }'); 

style.type = 'text/css'; 

if (style.styleSheet) { 
    style.styleSheet.cssText = declarations.nodeValue; 
} else { 
    style.appendChild(declarations); 
} 

head.appendChild(style); 

No es exactamente lo que necesitaba , pero puede modificarlo y hacer una función elegante si lo desea.

Answer 2

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).