滑動懸停效果導航菜單

Question

任何人都可以幫我做到這一點嗎？我有一個導航/菜單欄。每當我懸停在任何「李」上時，它都會獲得背景顏色（紅色）。當我將光標移動到下一個/上一個li時，我想要移動background color以獲得平滑的效果。當我從導航/菜單欄中移出時，背景顏色（紅色）應該作爲默認值返回到「家裏李」。爲了您的方便，請檢查我的codepen。

$('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/