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

【问题标题】：Button underline animation with css and html带有 css 和 html 的按钮下划线动画
【发布时间】：2020-03-29 00:18:13
【问题描述】：

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

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

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

【问题讨论】：

如果 jQuery 有用，我会很乐意使用它
您实际上可以通过使用复选框和 CSS 兄弟选择器使用纯 CSS 来解决这个问题。 stackoverflow.com/a/59001709/5526624
另外，这个东西不需要 JQuery。使用 vanilla JS 很简单，但现在您已经选择了正确的答案。

标签： html css animation

【解决方案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 类作为下划线。

【讨论】：

我会试试看！我也想过 jQuery :)
我在 jsFiddle 和本地 webstorm 实例上尝试过，但在两者上都不起作用...
是的，由于某种原因，当我粘贴您的代码时，它没有...谢谢伙计 :)

【解决方案2】：

然后请包含 jquery cdn 链接

试试这个脚本

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

添加这个 css

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

Working fiddle link

【讨论】：

很高兴为您提供帮助:)

【解决方案3】：

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

【讨论】：