Button's bottom border disappears when i click somewhere else on the screen

问题

fiddle

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>

This is my 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?

回答1:

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

回答2:

You can also do this without javascript at all :

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

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<label><input type="radio" name="test"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></label>

<label><input type="radio"name="test"><i class="fa fa-car fa-5x gobumpr_icon"></i></label>

回答3:

To achieve this you can set a class on the button you click on while removing the class from any other button. Try this:

$('button').click(function() {
    $('button').not(this).removeClass('active');
    $(this).toggleClass('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;
}

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

回答4:

This is happening because the css you have applied won't have any effect if the element looses focus. That is what is happening when you are clicking any where else.

Solve the problem by adding and removing a different class.

On clicking on button add a different class to the element.

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

On clicking on other one remove the class where it is already present.

Refer add class of javascript.

回答5:

If you apply css on button:focus that means till the time button is focus the css is applied but when you click anywhere on the screen its focus get disappeared.

Add .active class on button clicked and apply css on that.

$('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;    
}

来源：https://stackoverflow.com/questions/37458462/buttons-bottom-border-disappears-when-i-click-somewhere-else-on-the-screen

标签

html

css

font-awesome