Question

我正在使用以下代码隐藏页面加载的分区：

$(document).ready(function() {
    $('#menu1-holder').css('display', 'none');
    });
});

我需要更改CSS类，以显示使用“菜单项厨房”类划分鼠标悬停的划分

我已尝试过以下代码，但没有任何运气：

$(document).ready(function() {
    $('#menu1-holder').css('display', 'none');
    $("div.menu-items.kitchens").mouseover(function(){
        $('#menu1-holder').css('display', 'block');
    }).mouseout(function(){
        $('#menu1-holder').css('display', 'none');      
    });
});

有人可以查看代码并给我一些指示吗？

Answer 1

您可以使用.hover()：

进行一些简化

$('#menu1-holder').css('display', 'none');
    $("div.menu-items.kitchens").hover(function(){
        $('#menu1-holder').show();
    },function(){
        $('#menu1-holder').hide();
    });

我强烈怀疑选择器存在任何问题，而不是jQuery方法/函数。选择器$('div.menu-items.kitchens')（一个包含＆＃39;菜单项＆＃39; 和第二个类名＆＃39; kitchen＆＃39;）的div可能很好是正确的，但似乎有点过于精确，可能是错误的。如果您发布了有助于优化解决方案的html标记，并解释了您自己尝试的错误。

参考文献：

Answer 2

使用show和hide也应该更加健壮和简单：

$('#menu1-holder').show()

至于其余的代码，请确保menu-item没有最终的S（您的问题不明确），并向事件添加警报或控制台显示以确保CSS选择器是正确，事件实际上被解雇了。

Answer 3

仔细检查选择器“菜单项厨房”。这两个班级还是一个班级？

此外 - 您可以尝试使用jQuery show和hide函数（documentation here）。

鼠标悬停时jQuery CSS更改

3 个答案: