在没有 jquery 的情况下仅使用 css3 和 HTML5 制作悬停下划线答案

【问题标题】：Make hover underline without jquery only css3 and HTML5在没有 jquery 的情况下仅使用 css3 和 HTML5 制作悬停下划线
【发布时间】：2014-12-27 01:25:08
【问题描述】：

你好，我需要一些建议或帮助来制作这个按钮

var line = $(".accent-line");
$("a").hover(function() {
    line.addClass("active");
    line.removeClass("inactive");
  },
  function() {
    line.removeClass("active");
    line.addClass("inactive");
  }
);

@import url('//fonts.googleapis.com/css?family=Roboto:500');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
 body {
  padding: 64px 0;
  text-align: center;
}
.accent-line {
  height: 4px;
  display: block;
  position: relative;
  top: -5px;
  background-color: #FF2910;
  transition: width 0.4s ease-out;
}
.active {
  width: 120px;
}
.inactive {
  width: 5px;
}
.face-button {
  height: 64px;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #eee;
  overflow: hidden;
}
.face-button .icon {
  position: relative;
  margin-right: 4px;
}
.face-button .face-primary {
  height: 62px;
  border: #ccc 1px solid;
  display: block;
  padding: 0 32px;
  line-height: 64px;
  background-color: #eee;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="face-button" href="#">
  <div class="face-primary">
    <span class="icon fa fa-pencil"></span>
    Edit
  </div>
  <div class="accent-line"></div>
</a>

http://codepen.io/amnrzv/pen/YPzNgj

更具体地说，我需要将鼠标悬停在行的底部才能在不使用 jquery 的情况下仅使用 css3 HTML5

【问题讨论】：

标签： jquery html css button web

【解决方案1】：

不要切换 active 和 inactive 类，而是使用 (fiddle)

.accent-line {
  width: 5px;
}
.face-button:hover > .accent-line {
  width: 120px;
}

@import url('//fonts.googleapis.com/css?family=Roboto:500');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');

body {
  padding: 64px 0;
  text-align: center;
}
.face-button {
  height: 64px;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #eee;
  overflow: hidden;
}
.face-button .icon {
  position: relative;
  margin-right: 4px;
}
.face-button .face-primary {
  height: 62px;
  border: #ccc 1px solid;
  display: block;
  padding: 0 32px;
  line-height: 64px;
  background-color: #eee;
  color: #000;
}
.accent-line {
  height: 4px;
  display: block;
  position: relative;
  top: -5px;
  background-color: #FF2910;
  transition: width 0.4s ease-out;
  width: 5px;
}
.face-button:hover > .accent-line {
  width: 120px;
}

<a class="face-button" href="#">
  <div class="face-primary">
    <span class="icon fa fa-pencil"></span>
    Edit
  </div>
  <div class="accent-line"></div>
</a>

【讨论】：