html - 使用 css 和 html 的按钮下划线动画

Question

我有两个按钮，当我点击它们时它们有下划线动画。我想要实现的是，一个按钮在被点击后会保持下划线，如果我点击另一个按钮，第一个按钮会移除下划线，而另一个会变成下划线。

还有一个问题是，当我松开鼠标时，下划线会淡出。我不知道该怎么做。这是我现在的代码:

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

最好是使用 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');
    }
  });
});

然后只需使用 active 类作为下划线。