I'd spinning this off this original post: https://stackoverflow.com/a/65040903/1406440
I used something similar years ago (https://codepen.io/moy/pen/pZdjMX) but it uses a lot of jQuery in comparison. So I was wondering if I can amend the example in the original post to achieve the same effect. Which would mean...
class rather than id?:before or :after class so I don't have a div floating in the ul?const navBar = document.getElementById("nav");
const navCursor = navBar.querySelector('.cursor');
const navItems = navBar.querySelectorAll('li');
function handleMouseEnterNavItem(event) {
// executed when mouse enter a navigation item
// update cursor to match position and size of target
const { offsetLeft, clientWidth } = event.target;
navCursor.style.left = offsetLeft + 'px';
navCursor.style.width = clientWidth + 'px';
}
navItems.forEach((navItem) => {
navItem.addEventListener('mouseenter', handleMouseEnterNavItem);
});ul {
position: relative;
}
ul li {
font-family: sans-serif;
text-decoration: none;
color: gray;
margin: 22px 10px 10px;
display: inline-block;
padding: 0; /* note: padding will be underlined */
}
ul .cursor {
background: blue;
height: 1px;
position: absolute;
bottom: 0;
z-index: 10;
transition: .16s all 0.025s;
}
ul a {
text-decoration: none;
}<ul id="nav" class="tabs-nav">
<li class="active"><a href="#">News</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Time</a></li>
<div class="cursor"></div>
</ul>