带有 css 和 html 的按钮下划线动画

Question

I have two buttons that have underline animation when I click them. What I want to achieve is that one button, after being clicked, stays underlined, and, if I click the other one, the first removes the underlining and the other becomes underlined.

A problem is also that when I release the mouse, the underlining fades out. I don't know how to do it. Here is the code I have for now:

HTML:

<div id = 'hey'>
  <div class = 'b' id = 'b1' href="#">Button one</div>
    <div class = 'b' id = 'b2' href="#">Button Two</div>
</div>

CSS:

body,html { 
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #000;
}
#hey { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}

.b {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;

  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
.b:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.b:active:after { 
  width: 100%; 
  left: 0; 
}

Answer 1

Best is to use jQuery:

$('#hey').find('.b').each(function() {
  $(this).click(function() {
    if(!$(this).hasClass('active')) {
      $('#hey').find('.b').each(function() {$(this).removeClass('active');});
      $(this).addClass('active');
    }
    else {
      $(this).removeClass('active');
    }
  });
});

Then just use the class active for the underlining.

Answer 2

Please include jquery cdn link then

Try this script

$(".b").click(function() {
  if(!$(this).hasClass('active')) {
    $('#hey').find('.b').each(function() {$(this).removeClass('active');});
    $(this).addClass('active');
  }
  else {
    $(this).removeClass('active');
  }
});

Aldo add this css

.b.active:after { 
   width: 100%; 
   left: 0; 
}

Working fiddle link

Answer 3

Try this using jquery:

 $(document).ready(function(){ $('#hey .b').click(function(){ $('#hey .b').removeClass('active'); $(this).addClass('active'); }); });

 body,html { font: bold 14px/1.4 'Open Sans', arial, sans-serif; background: #000; } #hey { margin: 150px auto 0; padding: 0; list-style: none; display: table; width: 600px; text-align: center; } #hey .b { color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0.15em; cursor: pointer; display: inline-block; padding: 15px 20px; position: relative; } #hey .b:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } #hey .b.active:after { width: 100%; left: 0; }

 <div id = 'hey'> <div class="active b" id = 'b1' href="#">Button one</div> <div class="b" id = 'b2' href="#">Button Two</div> </div>