：hover javascript设置样式 [英] set style with :hover javascript

问题描述

我了解由于浏览器的兼容性，以下方法非常适合设置CSS样式。

I understand that the following method is great for setting CSS styles because of browser compatibility.

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

我不能做的是使用 cssText 将样式应用于：hover 和：focus CSS事件。


我该怎么办？

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。不要说使用 onmouseover 之类的javascript事件，而不是CSS ：hover （这与我的情况不符） 。）

P.S. Don't mention using javascript events such as onmouseover instead of the CSS :hover ( It doesn't fit my situation.)

推荐答案

您可以使用伏都教魔术来做到这一点：

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.

这篇关于：hover javascript设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！