Question

我正在尝试在此JSFIDDLE的Bootstrap导航栏上添加平滑的幻灯片悬停效果。我想要做的是在每个悬停的导航上水平滑动活动类样式。从我现在的尝试中可以看出，样式只是跳到任何悬停元素的顶部，而Active类仍然留在那里。

以下是我正在使用的CSS：

.navbar-nav>li {
    width: 120px;
    text-align:center
}
.navbar {
    margin-bottom: 30px;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background-color: darkgreen;
    color: white;
}
.navbar .nav > li > a:hover {
    background-color: darkgreen;
    color: white;
}

我还使用了这个没有通过的jquery

$( document ).ready(function() {
   $(".navbar .nav > li > a").on("mouseenter", function() {
       $( '.navbar .nav > li' ).addClass( "active" );

   }).on("mouseleave", function() {
    $( '.navbar .nav > li' ).removeClass( "active" );
}); 
});

请告诉我如何通过添加悬停/滑动效果让导航栏更具互动性？

由于

如何在Bootstrap Navbar Hover上添加幻灯片动画

0 个答案: