jQuery - 如果悬停，则更改背景图像答案

【问题标题】：jQuery - change background image if hoveredjQuery - 如果悬停，则更改背景图像
【发布时间】：2012-08-11 18:17:00
【问题描述】：

我有一个 jQuery 代码，当您将鼠标悬停在 div 上时，它可以完美运行。

$(function() {
    jQuery('#div-to-hover').hover(function(){
        jQuery('#my-background-image').css("background-image", "url(active.png)");
    });
});

我想更改它，以便当它悬停时，active.png 是背景图像。如果不悬停，则变为 normal.png。

【问题讨论】：

标签： jquery html css hover background-image

【解决方案1】：

$(function() {
    jQuery('#div-to-hover').hover(function(){
        jQuery('#my-background-image').css("background-image", "url(active.png)");
    }, function(){
        jQuery('#my-background-image').css("background-image", "url(normal.png)");
    });
});

【讨论】：

【解决方案2】：

只需检查事件类型以查看悬停事件是 mouseover 还是 mouseout 事件。

$(function() {
    jQuery('#div-to-hover').hover(function(e){
        var path = (e.type == 'mouseover') ? 'active.png' : 'normal.png';
        jQuery('#my-background-image').css("background-image", "url("+path+")");
    });
});

【讨论】：

或者您可以使用悬停功能的另一半，它会为您执行此操作。
@JonTaylor：+1！我更喜欢这种方式 :)

【解决方案3】：

当然最好将 div 设置为始终具有 normal.png 的背景并使用您当前的代码，而不是添加更多的 jQuery？

【讨论】：

是的，但他当前的代码不会在鼠标移出时删除背景并将其重置为正常。
这就是我正在做的。背景变得活跃并且永远不会变回来。这就是我问这个问题的原因。谢谢。

【解决方案4】：

你可以在纯 CSS 中做同样的事情。

#my-background-image {
  background-image: url(normal.png);
} 

#div-to-hover:hover #my-background-image {
  background-image: url(active.png);      
}

http://jsfiddle.net/xyzzy/fjh5z/

【讨论】：

这是真的，但是您假设#my-background-image 嵌套在#div-to-hover 中

【解决方案5】：

完整示例和来源：http://jsfiddle.net/maho/6swag/

不要使用 javascript 直接内联样式元素。改用类。这样你就可以使用单独的 CSS 来设置样式，效果会更好。

【讨论】：