当我点击屏幕上的其他地方时,按钮的底部边框消失 [英] Button's bottom border disappears when i click somewhere else on the screen
本文介绍了当我点击屏幕上的其他地方时,按钮的底部边框消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的HTML代码:
This is my HTML code:
<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;
}
我想让边框底部停留,直到另一个按钮被点击。
I want that border bottom to stay until the other button is being clicked. How can I do that?
推荐答案
:focus
不会帮助,因为边框将删除,每当你会点击外面。为此,您需要在上添加一个类,单击
按钮,除非点击同一页面中的其他按钮,否则将保留。
:focus
is not going to help because border will remove whenever you will click outside. For this you need to add a class on click
of button that will stay unless another buttons inside the same page is clicked.
$(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>
这篇关于当我点击屏幕上的其他地方时,按钮的底部边框消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文