Question

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

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

Answer 2

你遗漏了代码中的内容

$('.image-changer-hover').toggleClass('image-changer-hover2');

应该是

$('.image-changer-hover1').toggleClass('image-changer-hover2');

并且jquery代码的启动是这样的：

$(document).ready(function(){
.....
.....
.....
});

这是有效的 http://jsfiddle.net/wR7PN/8/

Answer 3

我整理了一个快速的jsFiddle，它可以解决你的问题：http://jsfiddle.net/2a6Rg/

每次将鼠标悬停在li上时，data-element指定的类都会添加到其父级，因此您可以使用CSS更改背景。

重要代码是：

$('#nav li').hover(
    function() {
        $(this).parent().addClass($(this).data('element'));
    },
    function() {
        $(this).parent().removeClass($(this).data('element'));
    }
);

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

3 个答案: