Question

我在本网站的菜单栏上遇到了一些问题：http://www.re-generation.ro/ro/campanii/minerit-aurifer。现在，第二个li元素处于活动状态。我想要做的是，hover比菜单中的任何其他li元素更高，当前有效class元素的li变为空白，然后悬停，它再次变得活跃。如果您访问该链接，您可以轻松了解我的内容。

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

提前谢谢你！

我的代码：

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

<强> HTML：

<ul id="menu">
    <li>Item 1</li>
    <li class="current active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<强> JavaScript的：

$('#menu li').on('mouseover', function() {
    var li$ = $(this);
    li$.parent('ul').find('li').removeClass('active');
    li$.addClass('active');
})
.on('mouseout', function() {
    var li$ = $(this);
    li$.removeClass('active');
    li$.parent('ul').find('li.current').addClass('active');
});

DEMO

Answer 2

您可能要做的第一件事是分配两个不同的州/类：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');
    }
});

在这里，您只选择直接后代并更新类，前提是它不是当前活动的列表项。

Answer 3

我会使用JQuery。像这样：

$('li').hover(function(){
  $('li.active').removeClass('active').addClass('normal');
});

$('li').mouseleave(function(){
  $('li.normal').removeClass('normal').addClass('active');
});

Answer 4

您缺少的是一种记住默认状态的方法。这是我的答案，还有 Fiddle

HTML：

<ul class="menuWithDefault">
    <li><a href="/one.html">Link One</a></li>
    <li class="active"><a href="/two.html">Link One</a></li>
    <li><a href="/three.html">Link One</a></li>
    <li><a href="/four.html">Link One</a></li>
</ul>

使用Javascript：

$(".menuWithDefault").each(function() {
    var defaultItem = $(this).find(".active").first();

    $(this).find("li").hover(function() {
        defaultItem.toggleClass('active', false);
        $(this).toggleClass('active', true);
    }, function() {
        $(this).toggleClass('active', false);
        defaultItem.toggleClass('active', true);
    });
});

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

4 个答案: