Javascript/jQuery - 将鼠标悬停在 li 元素上时，更改另一个 li 元素的类

Question

我在使用本网站的菜单栏时遇到一些问题:http://www.re-generation.ro/ro/campanii/minerit-aurifer .现在，第二个 li 元素处于事件状态。我想要做的是，在 hover 菜单中的任何其他 li 元素上，当前事件 li 的 class 元素变为空白，悬停时再次变为事件状态。如果您访问该链接，您可以很容易地理解我是什么。

如果您需要任何信息，请询问。

提前致谢!

我的代码:

var lis = document.getElementsByTagName('ul'); 
for (var i=0, len=lis.length; i<len; i++){ 
    lis[i].onmouseover = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = ''; 
        var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]); 
        ul.className = ''; 
    }; 
    lis[i].onmouseout = function(){ 
        var firstDiv = this.getElementsByTagName('li')[1]; 
        firstDiv.className = 'active'; 
    }; 
};

编辑:谢谢大家的回答!这真的很有帮助!

Answer 1

您可能想要做的第一件事是分配两个不同的状态/类:active 和current。一个告诉您应该显示哪个，另一个实际切换可见性。

$('#menu').on('mouseover', '> li', function(e) {
    # attach hover event to the menu, and check which LI you are hovering
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').removeClass('active');
    }
}).on('mouseout', '> li', function (e) {
    if (!$(this).hasClass('.current)')) {
        $('.current', '#menu').addClass('active');
    }
});

此处您仅选择直接后代并更新类，前提是它不是当前事件的列表项。