set style with :hover javascript
Solution 1
You can do it with some Voodoo magic:
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);
Not exactly what you needed, but you can tweak it and make a fancy function out of it if you want.
Solution 2
You could always add an individual style rule to an existing style sheet, instead of creating a new style element. Something along the lines of:
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);
}
}
I adapted the example at MDN
This assumes you are using a class (that is already defined and applied) to add the :hover pseudo-selector to, but it could just as easily be an ID or element selector.
If you were unable to add a class or style rule beforehand, you could also do that dynamically in much the same way (define class, define class:hover, then apply class to desired elements).
Web_Designer
Warning: Stack overflow was a deep pit for me. I wanted to be esteemed by others. But what is highly esteemed by others is detestable in the sight of God. Jesus said, "What would it profit you to gain the whole world and forfeit your soul?" God is patient, but He never fails to fulfill His word. Judgement will come where everyone will be repaid for their deeds. Read the Bible and give up everything to obey Jesus.
Updated on July 09, 2022Comments
-
Web_Designer almost 2 years
I understand that the following method is great for setting CSS styles because of browser compatibility.
element.style.cssText = "color:red;";
What I can't do is use
cssText
to apply styles on the:hover
and:focus
CSS events.
What do I do instead of this?element.style.cssText = ":focus{color:red;}";
P.S. Don't mention using javascript events such as
onmouseover
instead of the CSS:hover
( It doesn't fit my situation.) -
Web_Designer about 13 yearsWhat is "Voodoo magic"? Please explain. I sure don't like the connotations.