使用DOM元素定义悬停属性

Question

I'm working on a Chrome extension which displays a dynamically loaded popup. User can change settings to choose its color. My issue is that I would like to change some :hover attributes of popup's elements, but I don't find how.

My current code:

var myDiv = document.createElement('a');
myDiv.style.background = myIcon;
myDiv.style.backgroundImage = myURL;

What I would like to add (not working code atm):

myDiv.hover.style.backgroundColor = myColor;

Thank for help.

Answer 1

You can't set styles for pseudoclasses with JavaScript. Instead, you must define them with CSS. You can use JavaScript to dynamically add CSS to a page, though:

var style = document.createElement("style");
style.appendChild(
    document.createTextNode("some-selector:hover { /*...*/ }")
);
document.querySelector("head").appendChild(style);

...or similar.

Here's an example adding an element with class foo to a document, along with dynamically-defined styles for it:

 var foo = document.createElement("div"); foo.className = "foo"; foo.innerHTML = "This is foo, hover me"; document.body.appendChild(foo); var style = document.createElement("style"); // Pick a color at random var color = ["red", "blue", "green"][Math.floor(Math.random() * 3)]; style.appendChild( document.createTextNode( ".foo:hover { background-color: " + color + " }") ); document.querySelector("head").appendChild(style);