菜单悬停状态丢失！

Question

我希望菜单可以在:hover上进行交互。

所以这是代码：

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

这段代码可以正常工作，但是副作用是，当menuon状态结束时，它将失去其类并变为关闭状态。

你能处理吗...。我喜欢保持开启状态！

这是工作页面

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;
});