我用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;
- }
