fiddle https://jsfiddle.net/bbvxnsyo/
这是我的 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;
}
我希望该边框底部保持不变，直到单击另一个按钮。
我怎样才能做到这一点？
:focus不会有帮助，因为每当您单击外部时，边框都会删除。为此，您需要添加一个类click除非单击同一页面内的其他按钮，否则该按钮将保留。
$(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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
