css鼠标悬停下划线_如何使用CSS和JavaScript构建下划线悬停效果

css鼠标悬停下划线

在今天的教程中，我们将使用一些CSS和JavaScript来创建精美的菜单悬停效果。 这不是复杂的最终结果，但是构建它将是练习我们的前端技能的绝好机会。

在不做进一步介绍的情况下，让我们检查一下要构建的内容：

标记

我们从一些非常基本的标记开始； 包含菜单的nav元素和一个空的span元素：

<nav class="mynav">
  <ul>
    <li>
      <a href="">Home</a>
    </li>
    <li>
      <a href="">About</a>
    </li>
    <li>
      <a href="">Company</a>
    </li>
    <li>
      <a href="">Work</a>
    </li>
    <li>
      <a href="">Clients</a>
    </li>
    <li>
      <a href="">Contact</a>
    </li>
  </ul>
</nav>

<span class="target"></span>

CSS

准备好标记后，接下来我们为相关元素指定一些基本样式：

.mynav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

.mynav li:not(:last-child) {
  margin-right: 20px;
}

.mynav a {
  display: block;
  font-size: 20px;
  color: black;
  text-decoration: none;
  padding: 7px 15px;
}

.target {
  position: absolute;
  border-bottom: 4px solid transparent;
  z-index: -1;
  transform: translateX(-60px);
}

.mynav a,
.target {
  transition: all .35s ease-in-out;
}