fiddle
这是我的HTML代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <button> <i class="fa fa-5x fa-motorcycle gobumpr_icon"></i> </button> <button> <i class="fa fa-car fa-5x gobumpr_icon"></i> </button>
这是我的CSS:
button:focus { border-bottom: thick solid #FFA800; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; transition: width 2s; -webkit-transition: width 2s; outline: none; Box-shadow: none; }
解决方法
:焦点不会有帮助,因为只要你点击外面边框就会删除.为此,您需要在单击按钮时添加一个类,除非单击同一页面中的其他按钮.
$(function() { var buttons = $('.button'); buttons.click(function(e) { e.preventDefault(); buttons.removeClass('focus'); $(this).addClass('focus'); }); });
.button.focus { border-bottom:thick solid #FFA800; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; transition: width 2s; -webkit-transition: width 2s; outline:none; Box-shadow:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <button class="button"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button> <button class="button"><i class="fa fa-car fa-5x gobumpr_icon"></i></button>
原文地址:https://www.jb51.cc/html/225353.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。