如何通过JQuery更改CSS中伪元素的颜色?

时间:2013-04-29 13:44:48

标签: jquery css css3

我使用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)?

2 个答案:

答案 0 :(得分:18)

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

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

答案 1 :(得分:4)

这似乎对我有用(Firefox 20)......没有在其他任何地方测试过..

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

此处,:active是伪类,:before:after是伪元素。所以根据the standard,这是完全可以接受的。

  

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