伪元素适用于 javascript

Question

大家好，大家正在开发一个名为 colpick 的颜色选择器， 我正在使用 .css() 来更改不同元素的颜色，并且我在我的 js 中反复使用相同的 .css() a 并且元素更多所以我开始 var 元素并为它们使用 var 类似这样的东西

var colorElement = "a, upper"
$(colorElement).css('color', '#' + hex);

但我也想在悬停时编辑元素的颜色/样式，然后当我尝试使用 :hover 或 :link 或 :focus 或 active 等添加元素时

var colorElement = "a:hover, upper:focus, headline:active, bar, footer"
$(colorElement).css('color', '#' + hex);

然后它停止工作（那些伪包含元素不起作用） 那么知道如何使用它们吗？

问候，

Answer 1

jQuery 不会创建 CSS 规则，它只会改变当前的 DOM。因此，要在悬停、聚焦等之后更改 CSS 样式，您必须添加可以更改它的方法。

见how-to-define-the-css-hover-state-in-a-jquery-selector

$(".myclass, .myclass2").hover(function(e) { 
    $(this).css("color",e.type === "mouseenter"?"red":"transparent") 
})

---

更新：看看CSSX可以动态改变CSS样式：

var sheet = cssx();
var rule = sheet.add('a:hover, upper:focus, headline:active, bar, footer');
var setColor = function (hex) {
   return { 'color': '#' + hex };
};

//...

rule.update(setColor('ff0000'));