当我点击屏幕上的其他位置时,按钮的下边框消失

时间:2016-05-26 10:40:15

标签: html css font-awesome

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

我希望边框底部保持不变,直到单击另一个按钮。 我怎么能这样做?

5 个答案:

答案 0 :(得分:5)

: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>

答案 1 :(得分:3)

您也可以在没有javascript的情况下执行此操作:

int evenCount = 0;
int countFrom = 1;
int countTo = 10;
for (int i = countFrom; i <= countTo; i++) {
    if (i % 2 == 0) {
        evenCount += i
    }
}
input:checked + i{
	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;
}

input{
  display:none;
}

答案 2 :(得分:2)

要实现此目的,您可以在单击按钮时设置类,同时从任何其他按钮中删除该类。试试这个:

&#13;
&#13;
$('button').click(function() {
    $('button').not(this).removeClass('active');
    $(this).toggleClass('active');
})
&#13;
button.active {
    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;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:2)

这种情况正在发生,因为如果元素失去焦点,您应用的CSS将不会产生任何影响。这就是当你点击任何其他地方时发生的事情。

通过添加和删除其他类来解决问题。

单击按钮时,为元素添加不同的类。

.borderBottom
{
  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;    
}

点击另一个时,删除它已存在的类。

参考javascript的add class

答案 4 :(得分:1)

如果你在button:focus上应用css,这意味着直到时间按钮为焦点,css才会被应用,但是当你点击屏幕上的任何地方时,它的焦点就会消失。

点击按钮添加.active课程并在其上应用css。

$('button').click(function() {
    $('button').removeClass('active');
    $(this).addClass('active');
})

button.active {
  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;    
}