悬停下划线的边距问题

Question

Recently I have been trying to make an underline hover effect. I have used some previous JavaScript, but the issue seems to be that when I hover over a link, it stops prematurely. I believe that there must be an issue with the margin-left, I set in the JS, but I'm not sure where to next

 $(".underline-nav").css("width", $("#one").width()); $(".underline-nav").css("margin-left", $("#one").css("margin-left")); var unav = $(".underline-nav"); $('nav a').mouseover(function() { $(".underline-nav").css("transition", "all ease 0.43s"); var position = $(this).position(); unav.css({ "width": $(this).width(), "margin-left": $(this).css("margin-left"), "left": position.left }); }) $('nav').mouseleave(function() { $(".underline-nav").css("transition", "all ease 0.7s"); var firstChild = $(this).find('a:first-child'); var position = firstChild.position(); unav.css({ "width": firstChild.width(), "margin-left": firstChild.css("margin-left"), "left": position.left }); })

 html { background-color: blue; } .underline-nav { background: tomato; height: .25rem; position: absolute; top: 6vh; transition: all ease 0.37s; z-index: 0; } .mainnav { padding-top: 1vh; width: 100%; position: absolute; z-index: 4; font-size: 0.8vw; text-align: center; display: flex; justify-content: center; align-items: center; } nav img { padding-left: 4vw; height: 3.5vw; } a { color: #fff; text-decoration: none; font-weight: 700; padding-left: 4vw; letter-spacing: 0.4em; } .sectionone { height: 100vh; background: url('media/bg.jpg') no-repeat center center fixed; background-size: cover; color: #fff; font-family: 'Raleway'; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <div class="mainnav"> <a id="one" href="#">HOME</a> <a href="#">LINK 1</a> <a href="#">LINK 2</a> <img src="/media/Asset 1.png" alt="logo"> <a href="#">LINK 3</a> <a href="#">LINK 4</a> <a href="#">LINK 5</a> <div class="underline-nav"> </div> </div> </nav>

CODEPEN: https://codepen.io/anon/pen/xeYGbK

Thanks guys

Answer 1

You have to also mind the padding in your links and the eventually line-height. A css update can be :

.underline-nav {
  margin-top:1.2vw;/* set underline under the link */
  transform : translatex(4vw);/* padding value */
}

demo https://codepen.io/anon/pen/ZZrGvd

 $(".underline-nav").css("width", $("#one").width()); $(".underline-nav").css("margin-left", $("#one").css("margin-left")); var unav = $(".underline-nav"); $('nav a').mouseover(function() { $(".underline-nav").css("transition", "all ease 0.43s"); var position = $(this).position(); unav.css({ "width": $(this).width(), "margin-left": $(this).css("margin-left"), "left": position.left }); }) $('nav').mouseleave(function() { $(".underline-nav").css("transition", "all ease 0.7s"); var firstChild = $(this).find('a:first-child'); var position = firstChild.position(); unav.css({ "width": firstChild.width(), "margin-left": firstChild.css("margin-left"), "left": position.left }); })

 html { background-color: blue; } body { margin: 0; } .underline-nav { background: tomato; height: .25rem; position: absolute; top: 6vh; margin-top: 1.2vw; transform: translatex(4vw); transition: all ease 0.37s; z-index: 0; } .mainnav { padding-top: 1vh; width: 100%; position: absolute; z-index: 4; font-size: 0.8vw; text-align: center; display: flex; justify-content: center; align-items: center; } nav img { padding-left: 4vw; height: 3.5vw; } a { color: #fff; text-decoration: none; font-weight: 700; padding-left: 4vw; letter-spacing: 0.4em; } .sectionone { height: 100vh; background: url('media/bg.jpg') no-repeat center center fixed; background-size: cover; color: #fff; font-family: 'Raleway'; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <div class="mainnav"> <a id="one" href="#">HOME</a> <a href="#">LINK 1</a> <a href="#">LINK 2</a> <img src="/media/Asset 1.png" alt="logo"> <a href="#">LINK 3</a> <a href="#">LINK 4</a> <a href="#">LINK 5</a> <div class="underline-nav"> </div> </div> </nav>

Answer 2

I have changed padding-left of a to margin-left and it seem to work perfectly. I hope this is what you want

 $(".underline-nav").css("width", $("#one").width()); $(".underline-nav").css("margin-left", $("#one").css("margin-left")); var unav = $(".underline-nav"); $('nav a').mouseover(function() { $(".underline-nav").css("transition", "all ease 0.43s"); var position = $(this).position(); unav.css({ "width": $(this).width(), "margin-left": $(this).css("margin-left"), "left": position.left }); }) $('nav').mouseleave(function() { $(".underline-nav").css("transition", "all ease 0.7s"); var firstChild = $(this).find('a:first-child'); var position = firstChild.position(); unav.css({ "width": firstChild.width(), "margin-left": firstChild.css("margin-left"), "left": position.left }); })

 html { background-color: blue; } .underline-nav { background: tomato; height: .25rem; position: absolute; top: 6vh; transition: all ease 0.37s; z-index: 0; } .mainnav { padding-top: 1vh; width: 100%; position: absolute; z-index: 4; font-size: 0.8vw; text-align: center; display: flex; justify-content: center; align-items: center; } nav img { padding-left: 4vw; height: 3.5vw; } a { color: #fff; text-decoration: none; font-weight: 700; margin-left: 4vw; letter-spacing: 0.4em; } .sectionone { height: 100vh; background: url('media/bg.jpg') no-repeat center center fixed; background-size: cover; color: #fff; font-family: 'Raleway'; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <div class="mainnav"> <a id="one" href="#">HOME</a> <a href="#">LINK 1</a> <a href="#">LINK 2</a> <img src="/media/Asset 1.png" alt="logo"> <a href="#">LINK 3</a> <a href="#">LINK 4</a> <a href="#">LINK 5</a> <div class="underline-nav"> </div> </div> </nav>

Answer 3

In the CSS for the a element, change the padding to a margin (so that you're keeping the spacing without affecting the size of the element), and center-align the text:

a {
    color:#fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.4em;
    margin-left: 4vw;
    text-align:center;
}

Demo: https://codepen.io/glhr/pen/JVpdMX