问题描述：

我制作了一个使用CSS的心形按钮。 Here是我的代码的JSFiddle链接。如何通过JQuery更改CSS中的伪元素的颜色？

#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做 - 看http://stackoverflow.com/问题/ 3743513 /怎么办-I-AC cess-style-properties-of-pseudo-elements-with-jquery – andyb 2013-04-29 13:46:47

改为添加类。无论如何，最好保留CSS中的所有样式。 – powerbuoy 2013-04-29 14:07:54

答

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

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

谢谢，培文，这是我需要的 – user824624 2013-04-29 14:20:27

好sol'n @ Peiwen – Todd 2015-05-01 23:43:38

加1赞成这个梦幻般的答案！ – 2016-09-14 21:26:01

答

这似乎为我工作（火狐20）......在别的没有测试..

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

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

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

css部分很明显，asker的问题是改变颜色后，与jQuery ...这是不工作... :) – Frhay 2013-04-29 13:56:52

在这种情况下给该元素使用jQuery onlick另一个类 - 然后它不同的风格。 ..我会尽量做一个jsfiddle ... – naththedeveloper 2013-04-29 13:59:52

http://jsfiddle.net/npMyy/2/ – naththedeveloper 2013-04-29 14:03:28

答

另一个sol'n是改变提交您的窗体类和目标的心脏孩子的: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>

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

DEMO

jQuery的

CSS

HTML

相关推荐