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