Question

我正在构建一个导航菜单，其中链接在悬停时加下划线。单击链接时，我希望保留下划线，而不是为当前页面再次设置动画。

到目前为止，这是我的目标。

header ul li a:after {
    content: '';
    display: block;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
    margin: 14px 0px 0px 0px;
}

header ul li a:hover:after {
    width: 100%;
    background: #FFF;

}

此代码将在链接悬停时添加下划线。我已经尝试使用javascript保持当前页面的下划线链接，但它不会产生所需的效果。

document.getElementById('contact-link').style.borderBottom = '3px solid 
white'; 

document.getElementById('contact-link').style.paddingBottom = '0px';

这是一个我想要完成的例子。 https://rocketlabusa.com/

Answer 1

如果您在点击中添加课程，我就会工作...

＆＃13;

$("header ul li a").on("click", function(){
  $(this).addClass("visited");
});

＆＃13;

body{
  background-color:black;
}

header ul li a:after {
    content: '';
    display: block;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
    margin: 14px 0px 0px 0px;
}

header ul li a:hover:after {
    width: 100%;
    background: #FFF;
}

header ul li a.visited:after {
    width: 100%;
    background: #FFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <ul>
    <li>

<a href="https://stackoverflow.com/questions/45679020/how-do-i-keep-animated-links-underlined-for-the-current-page" target="blank">hello</a>
    </li>
  </ul>
</header>

＆＃13;

Answer 2

最后添加以下CSS：

header ul li a:visited {
    text-decoration:underline;
}

如何为当前页面保留下划线的动画链接？

2 个答案: