具有滑动悬停效果的导航菜单

Question

谁能帮我做这个？ 我有一个导航/菜单栏。 每当我将鼠标悬停在任何“li”上时，它都会获得背景颜色（红色）。 每当我将光标移动到下一个/上一个li我想做的事情我想以平滑的效果移动background color 。 当我从导航/菜单栏移出时，背景颜色（红色）应该回到“Home li”作为默认值。为了您的方便，请检查我的代码笔。

 $('nav li').hover( function() { $('ul', this).stop().slideDown(200); }, function() { $('ul', this).stop().slideUp(200); } ); function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 nav {background: #2ba0db;} nav ul {font-size : 0;margin : 0;padding : 0;} nav ul li { display : inline-block; position : relative;} nav ul li:first-Child {display : inline-block;position : relative;background:red;} nav ul li a {color : #fff;display : block;font-size:14px;padding:15px 14px; transition : 0.3s linear;text-decoration: none;} nav ul li:hover {background : red;} nav ul li ul {border-bottom : 5px solid #2ba0db;display : none;position : absolute;width : 250px;z-index: 1;} nav ul li ul li {border-top : 1px solid #444;display : block;} nav ul li ul li:first-child{border-top none;} nav ul li ul li a { background: #373737; display: block; padding:10px 14px; text-decoration: none; } nav ul li ul li a:hover { background: #126d9b; } ul.topnav li.icon { display: none; } @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon {float: right;display: inline-block;}} @media screen and (max-width:680px) { ul.topnav.responsive {position:relative;} ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;} ul.topnav.responsive li {float: none;display: inline; } ul.topnav.responsive li a {display: block;text-align: left; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a href="#">Categories </a> <ul> <li><a href="#">Category One</a></li> <li><a href="#">Category Two</a></li> <li><a href="#">Category Three</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a> </li> </ul>

Answer 1

这是你想要的？ （第二个例子）

https://css-tricks.com/examples/MagicLine/

Answer 2

https://codepen.io/shoumiksk/pen/PoJmQEN

这是主要功能

 const marker = document.querySelector('#marker') const item = document.querySelectorAll('ul li a') function indicator(e){ marker.style.top = e.offsetTop+'px'; marker.style.width = e.offsetWidth+'px'; } item.forEach(link=>{ link.addEventListener('mousemove', (e)=>{ indicator(e.target) }) })

我知道我已经很晚了，但是对于那些仍在徘徊的人，我做了一个类似且更简单的 :)