我制作了一个使用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