我用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伪元素制成的.我不能轻易地改变颜色如预期.
解决方法
我设置:之前:背景颜色继承后,然后更改其父级的背景颜色.
http://jsfiddle.net/npMyy/3/
.outline { background: red; } #heart .outline:before,#heart .outline:after { background: inherit; }
原文地址:https://www.jb51.cc/jquery/175621.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。