2

我正在尝试在这个JS Fiddle的 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" );
}); 
});

如何通过添加悬停/滑动效果使导航栏更具交互性？

4

0 回答 0