jQuery - 更改背景图像，如果徘徊

我有一个jQuery代码，当你把鼠标悬停在div上时，它是完美的。jQuery - 更改背景图像，如果徘徊

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

我想改变它，以便当它被徘徊时，然后active.png是背景图像。如果没有徘徊，那么它变成normal.png。

来源

2012-08-10 Haradzieniec

$(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)"); 
    }); 
});

来源

2012-08-10 09:14:15 Dipak

只需检查事件类型，看是否悬停事件是鼠标悬停或鼠标移出事件。

$(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+")"); 
    }); 
});

来源

2012-08-10 09:13:34

或者你可以使用另一半的悬停功能，它为你做这个。 – 2012-08-10 09:14:38

@JonTaylor：+1！我更喜欢这种方式:) :) – 2012-08-10 09:17:26

当然，它会更好，设置DIV总是有normal.png背景，只需用当前的代码，而不是增加更多的jQuery？

来源

2012-08-10 09:14:26 Andy

是的，但他的当前代码不会删除并在mouseout上将背景重置为正常。 – 2012-08-10 09:15:13

这就是我正在做的。背景变得活跃，永不改变。这就是我问这个问题的原因。谢谢。 – Haradzieniec 2012-08-10 09:15:26

你可以在纯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/

来源

2012-08-10 09:15:02 Simone

这是真的，但是你假设'＃我的背景图像嵌套在'＃div-to-hover'内 – Curt 2012-08-10 09:15:32

是的，我正要写它。感谢您指出 – Simone 2012-08-10 09:16:01