【问题标题】：How to change the colour of pseudo-elements in CSS through JQuery?如何通过 JQuery 改变 CSS 中伪元素的颜色？
【发布时间】：2013-04-29 13:44:47
【问题描述】：

我使用 CSS 制作了一个心形按钮。 Here 是我的代码的 JSFiddle 链接。

#heart {
  height: 50px;
  width: 50px;
  position: relative;
}
#heart .outline:before,
#heart .outline:after {
  position: absolute;
  content: "";
  left: 28px;
  top: 1px;
  width: 15px;
  height: 27px;
  background: #d53423;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 85px 60px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart .outline:after {
  left: 13px;
  -webkit-transform: rotate(45deg);
  border-radius: 45px 60px 0 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
$("#heart").on('submit',
function(e) {
  console.log('click heart support');
  e.preventDefault();
  $('#heart .outline:before').css('background', 'grey');
}
);

<form id="heart">
  <button id="like_btn" class="outline" type="submit"></button>
</form>

当我点击表单按钮时，我希望这个心形按钮改变它的颜色。然而，这个心形按钮是由 CSS 伪元素制成的，因此我不能轻易改变它的颜色。

有没有人知道如何使用 JQuery 操作 CSS 伪元素（例如 :before 和 :after）？

【问题讨论】：

无法用 jQuery 完成 - 请参阅 stackoverflow.com/questions/3743513/…
改为添加一个类。无论如何，最好将所有样式保留在 CSS 中。

标签： jquery css

【解决方案1】：

我设置:before:after背景颜色继承，然后更改其父的背景颜色。 http://jsfiddle.net/npMyy/3/

.outline {
    background: red;
}
#heart .outline:before, #heart .outline:after {
    background: inherit;
}

【讨论】：

谢谢佩文，这正是我需要的

【解决方案2】：

这似乎对我有用（Firefox 20）......没有在其他任何东西上测试过......

#heart .outline:active:before,
#heart .outline:active:after {
    background: #000;
}

这里，:active 是伪类，:before 和 :after 是伪元素。所以根据the standard，这是完全可以接受的。

选择器中的任何地方都允许使用伪类，而伪元素只能附加在选择器的最后一个简单选择器之后。

【讨论】：

css 部分显然可以工作，提问者的问题是用 jQuery 改变颜色之后......这不起作用...... :)
在这种情况下，使用 jQuery onlick 给元素另一个类 - 然后设置不同的样式...我会尝试制作一个 jsfiddle...

【解决方案3】：

另一个解决方案是在提交时更改表单的类，并使用修改后的选择器定位心脏孩子的:before 和:after。 虽然我真的很喜欢 N A T H 使用 :active 的答案。 sxy。只需对现有代码进行少量更改。

DEMO

jquery

$("#heart:not(.submitted)").on('submit',function(e){
    console.log('click heart support');     
    e.preventDefault();
    $('#heart').addClass('submitted');
});

css

// ... removed lines 

#heart.submitted .outline:before,
#heart.submitted .outline:after{
    background: grey;
}

html

<form id="heart" >
    <button id="like_btn" class="outline" type="submit" ></button>
</form>

【讨论】：