懸停使用jquery刪除當前標籤

Question

我有一個菜單，當我將鼠標懸停在它下面的標籤上時，我想在懸停其他標籤時刪除「當前」類。目前情況是，我需要懸停「當前」選項卡才能刪除當前課程。我想要的是，當我直接懸停在下一個選項卡上時，「當前」類將自動刪除。請參閱我的演示鏈接。

這裏是DEMO

我也曾經嘗試這樣的代碼：

$('.left-menu >li').on('mouseover', '>a', function() { 
 
    $(this).parent().addClass('on'); 
 
}).on('mouseleave', '>a', function() { 
 
    $(this).parent().removeClass('on'); 
 
});

.left-menu { 
 
    width: 180px; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
    margin-top: -2px; 
 
} 
 
.left-menu li { 
 
    display: block; 
 
    line-height: 44px; 
 
    vertical-align: middle; 
 
    border-bottom: 1px solid #dcdcdc; 
 
    background: #fff; 
 
} 
 
.left-menu li a { 
 
    display: block; 
 
    color: #313131; 
 
    padding-left: 20px; 
 
} 
 
.left-menu li a:hover { 
 
    color: #fff; 
 
} 
 
.left-menu li:first-child { 
 
    border-top: 1px solid #dcdcdc; 
 
} 
 
.left-menu li.current { 
 
    border-bottom: 1px solid green; 
 
} 
 
.left-menu li.current a { 
 
    color: #fff; 
 
    background: green; 
 
} 
 
.left-menu li:hover { 
 
    color: #fff; 
 
    background: green; 
 
    border-bottom: 1px solid green; 
 
} 
 
.left-menu li:hover a { 
 
    color: #fff; 
 
}

<ul class="left-menu"> 
 
    <li><a href="#">tab1</a> 
 
    </li> 
 
    <li><a href="#">tab2</a> 
 
    </li> 
 
    <li><a href="#">tab3</a> 
 
    </li> 
 
</ul>

通過刪除 「當前」 類，但有必要在那裏。請幫忙。

Answer 1

您也可以使用.siblings() method以便從同級元素中刪除該類。此外，.addBack() method也用於添加當前元素。

Updated Example

$('.left-menu >li').on('mouseover', '>a', function() { 
    $(this).parent().siblings().addBack().removeClass('current'); 
}).on('mouseleave', function() { 
    $(this).parent().addClass('current'); 
});