javascript - How do I keep animated links underlined for the current page? -
i'm building nav menu links underlined on hover. when link clicked want underline remain, , not animate again current page.
here's have far.
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; }
this code add underline when link hovered. i've tried keeping link underlined current page javascript, doesn't produce desired affect.
document.getelementbyid('contact-link').style.borderbottom = '3px solid white'; document.getelementbyid('contact-link').style.paddingbottom = '0px';
here example want i'm trying accomplish. https://rocketlabusa.com/
i works if add class on click...
$("header ul li a").on("click", function(){ $(this).addclass("visited"); });
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; }
<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>
Comments
Post a Comment