Question

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

这段文字实际上我不得不写，因为它不会让我发帖而不是漫无边际，即使这是一个简单的问题。这非常令人沮丧。漫步，絮絮叨叨。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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 /：在规则之前

#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>

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

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

2 个答案: