滑动悬停效果导航菜单

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/