使用 :hover javascript 设置样式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6006763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 19:07:36  来源:igfitidea点击:

set style with :hover javascript

javascriptcssdomstylesheet

提问by Web_Designer

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

我知道由于浏览器兼容性,以下方法非常适合设置 CSS 样式。

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

What I can't do is use cssTextto apply styles on the :hoverand :focusCSS events.
What do I do instead of this?

我不能做的是cssText:hover:focusCSS 事件上应用样式。
我该怎么做而不是这个?

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

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

PS不要提到使用javascript事件onmouseover代替CSS :hover(它不适合我的情况。)

采纳答案by Blender

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.

不完全是您所需要的,但是如果您愿意,您可以对其进行调整并从中制作出精美的功能。

回答by Chase

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

我改编了MDN 上示例
这假设您正在使用一个类(已经定义和应用)来添加 :hover 伪选择器,但它也可以很容易地成为 ID 或元素选择器。

如果您无法事先添加类或样式规则,您也可以以几乎相同的方式动态添加(定义类,定义类:悬停,然后将类应用于所需的元素)。