具有滑動懸停效果的導航菜單

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) }) })

我知道我已經很晚了，但是對於那些仍在徘徊的人，我做了一個類似且更簡單的 :)