Question

我喜欢我的菜单是:hover上的互动。

所以这是代码：

$('#menu img').hover(function (){
    $(this).removeClass();
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass();
    $(this).addClass('menuoff');
    return false;
});

此代码工作正常，但副作用是当 menuon 状态结束时，它会失去它并关闭。

On你处理那个....我喜欢on状态留下来！

这是the working page

Answer 1

您可以通过从悬停事件中删除当前菜单项来执行您想要的操作：

$('#menu img:not(.menuon)').hover(
...

但是您将当前菜单项样式与悬停样式混合在一起，我认为这会让用户感到困惑。

如果您只使用javascript应用悬停样式并添加currentMenu类来设置与menuon样式略有不同的当前菜单项的样式，那么可能看起来会更好。

<img src="layout/menu_acceuil.jpg" class="currentMenu" /> 
<img src="layout/menu_pourquoi.jpg" /> 
...

Answer 2

如果您检查dom，您会看到正在添加menuoff和menuon。相反，你应该明确地删除类：

$('#menu img').hover(function (){
    $(this).removeClass('menuoff');
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass('menuon');
    $(this).addClass('menuoff');
    return false;
});

Answer 3

就像meder所说，你需要指定要删除的类。关闭状态我不会有替代课程。您所需要的只是：

$('#menu img').hover(function (){
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass('menuon');
    return false;
});

菜单悬停状态丢失！

3 个答案: