在导航栏上添加下划线动画

15 浏览
0 Comments

在导航栏上添加下划线动画

我正在尝试为我的导航栏中的元素添加一个鼠标悬停时的渐入渐出下划线效果。然而，它不仅仅为选定的链接添加下划线，而是为整个ul元素添加下划线。

我该如何修复这个问题？

a {
  text-decoration: none;
  color: black;
}
.nav a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgb(92, 149, 112);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}
.nav a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}
ul.nav {
  font-size: 11px;
  list-style: none;
  position: fixed;
  display: block;
  padding: 0;
  margin: 0;
  z-index: 100;
  top: 0.5em;
  right: 1.5em;
}
.nav li {
  display: inline-block;
  margin: 7px 15px;
}
.nav a:active::before {
  visibility: visible;
  transform: scaleX(1)
}

0

2 答案

0 Comments

在这个问题中，出现的原因是伪元素 a::before 是相对于 ul.nav 进行绝对定位的，因为它是最接近的定位元素。结果是，该元素脱离了文档流，所以 width: 100% 使其占据了 ul 可用宽度的100%。在你的 a 样式中添加 position: relative，如下例所示，它将按你的期望工作：

a {
  text-decoration: none;
  color: black;
  position: relative;
}
.nav a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: rgb(92, 149, 112);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}
.nav a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}
ul.nav {
  font-size: 11px;
  list-style: none;
  position: fixed;
  display: block;
  padding: 0;
  margin: 0;
  z-index: 100;
  top: 0.5em;
  right: 1.5em;
}
.nav li {
  display: inline-block;
  margin: 7px 15px;
}
.nav a:active::before {
  visibility: visible;
  transform: scaleX(1)
}

<ul class="nav">
  <li id="nav-home"><a id="a-home" href="#">Home</a></li>
  <li id="nav-services"><a href="#">Services</a></li>
  <li id="nav-about"><a href="#">About</a></li>
  <li id="nav-contact"><a href="#">Contact</a></li>
</ul>

0
0 Comments

导航栏下划线动画的问题出现的原因是没有给包裹绝对定位元素的相对定位父元素li添加position: relative属性，导致绝对定位的a元素将整个ul元素作为相对定位父元素。解决方法是给.nav li添加position: relative属性。

代码如下：

.nav li {
  position: relative;
}
.nav a::before  { 
   bottom: -2px; /* 与边框高度保持一致 */
}

完整代码如下：

a {
  text-decoration: none;
  color: black;
}
.nav li {
  position: relative;
}
.nav a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: rgb(92, 149, 112);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}
.nav a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}
ul.nav {
  font-size: 11px;
  list-style: none;
  position: fixed;
  display: block;
  padding: 0;
  margin: 0;
  z-index: 100;
  top: 0.5em;
  right: 1.5em;
}
.nav li {
  display: inline-block;
  margin: 7px 15px;
}
.nav a:active::before {
  visibility: visible;
  transform: scaleX(1)
}

HTML代码如下：

0