javascript - 悬停时每个菜单父项的新背景图像

Question

我想知道如何做到这一点。我有一个菜单，它位于一个带有背景图像的 500 像素高的容器中。我希望能够在将鼠标悬停在父菜单项上时更改背景图像。我认为这可以通过以下方式实现:

jQuery:

$('#elm').hover(
   function(){ $(this).addClass('hover') },
   function(){ $(this).removeClass('hover') }
)

或者使用 .toggleClass

然后只需在它们切换到的 css 类中定义背景图像即可。我已经为我的 DEMO HERE 中的第一个菜单项设置了所有内容。但是它目前无法正常工作。看起来很直接，我不明白为什么它不起作用。任何帮助都会很棒....谢谢你们。

*我在示例中注释掉了一个函数以尝试不同的方式

Answer 1

只需使用纯 CSS。

#elm {
    /*Style when not hovered*/
    background: url(http://placehold.it/200x300);
}

#elm:hover {
    /*Style when hovered*/
    background: url(http://placekitten.com/200/300);
}