我用css做了心脏按钮.这里是从小提琴
http://jsfiddle.net/helxsz/npMyy/的链接
#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(例如：之前和之后)操纵伪元素,任何一个都有一个线索
解决方法
我设置：之前：背景颜色继承后,然后更改其父级的背景颜色.
http://jsfiddle.net/npMyy/3/
.outline {
background: red;
}
#heart .outline:before,#heart .outline:after {
background: inherit;
}