下划线 CSS 动画在活动页面上停止答案

【问题标题】：Underline CSS Animation stop on active page下划线 CSS 动画在活动页面上停止
【发布时间】：2014-11-11 15:47:44
【问题描述】：

动画效果很好，我想知道的是如何在我所在的活动页面上保留下划线。举个例子。这将是“工作”页面。

我实际上必须写下这段文字，因为即使这是一个简单的问题，它也不会让我在不啰嗦的情况下发布。这非常令人沮丧。闲逛，再闲逛。

#Nlink {
      float: right;
      position: relative;
      margin-left: 46px;
      text-align: right;
      color: #2e33ff;
}
#Nlink > a {
      text-decoration: none;
      color: #2e33ff;
}
#Nlink > a:hover {
      color: #2e33ff;
}
#Nlink > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #ff2e2e;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
}
#Nlink > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

<div id="Ncontainer">
  <div id="Ncontain">
    <div id="Nlogo">
    </div>
    <div id="Nmenu">
      <div id="Nlink"><a href="url">Contact</a>
      </div>
      <div id="Nlink"><a href="url">About</a>
      </div>
      <div id="Nlink"><a href="index.html">Work</a>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

你试过使用:activecss伪元素吗？
只需在每个 html 页面上添加一个活动类。 ...

标签： html css css-animations underline

【解决方案1】：

像这样：

首先，当您在页面上时，向该元素添加一个类，您甚至可以通过 javascript 来完成。

示例

var nav_items = document.querySelector("#Nlink a");
for (var i=0,l=nav_items.length;i<l;i++) {
   if(nav_item.href === window.location) {
      nav_item.className += " active";
   }
}

然后你只需添加第二条规则来匹配你的块：hover/:before 规则

#Nlink {
      float: right;
      position: relative;
      margin-left: 46px;
      text-align: right;
      color: #2e33ff;
}
#Nlink > a {
      text-decoration: none;
      color: #2e33ff;
}
#Nlink > a:hover,
#Nlink > a.active {
      color: #2e33ff;
}
#Nlink > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #ff2e2e;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
}
#Nlink > a:hover:before,
#Nlink > a.active:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

<div id="Ncontainer">
  <div id="Ncontain">
    <div id="Nlogo">
    </div>
    <div id="Nmenu">
      <div id="Nlink"><a href="url" class="active">Contact</a>
      </div>
      <div id="Nlink"><a href="url">About</a>
      </div>
      <div id="Nlink"><a href="index.html">Work</a>
      </div>
    </div>
  </div>
</div>

【讨论】：

啊我现在明白了。非常感谢！
@user2307186 - 如果它解决了您的问题，请将其标记为您的答案。谢谢！

【解决方案2】：

正如@Danko 所建议的那样，您需要在它们处于活动状态的页面上的链接中添加一个类。此外，将您的选择器更改为类而不是 ID，这样您的页面上就不会出现重复的 ID。

在工作页面上，例如：

<div class="Nlink active"><a href="index.html">Work</a>
</div>

然后添加样式：

.Nlink.active > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #ff2e2e;
      visibility: visible;
}

【讨论】：