如何在鼠標上更改div背景圖片？

我有7個縮略圖圖像菜單。當用戶將(mouseover)指向特定的縮略圖時，我想將<div>的背景圖像更改爲該縮略圖的相關圖像。如何在鼠標上更改div背景圖片？

縮略圖菜單是一個差異DIV

2010-06-21 nectar

您可以使用jQuery這樣的：

$(function(){ 
    $('div.someclass').hover(function(){ 
     $(this).addClass('hover_class'); 
    }, function(){ 
     $(this).addClass('mouseout_class'); 
    } 
); 
});

如果你已經在你的樣式表中指定的hover_class和mouseout_class與相應的圖像，例如

<style type="text/css"> 
.hover_class { 
    background-image: url(url 1); 
} 

.mouseout_class{ 
    background-image: url(url 2); 
} 
</style>

來源

2010-06-21 12:59:33 Sarfraz

但'網址1'不固定，因爲我說我有7個縮略圖，所以我如何顯示七個差異圖像？ – nectar 2010-06-21 16:31:22

純css有什麼問題？

div.thumbnail:hover { 
background-image: url(image/in/question); 
}

簡單地改變div.thumbnail以反映您的div和class和id名稱（ID的情況下更換.與#）

來源

2010-06-21 13:00:27

這在IE6中不起作用。 – Sarfraz 2010-06-21 13:01:38

確保使用CSS Sprite以避免由新圖像加載引起的翻轉閃爍。這裏是一個很好的開始：http://stackoverflow.com/questions/2932566/how-do-css-sprites-work – 2010-06-21 13:03:43

@Sarfraz - 這可能不是問題，它不適用於我目前的任何項目，*希望*很快就會出現這種情況。 – 2010-06-21 13:08:53

做

$('#thumbnailimg').hover(function(){ 
    $('#changeme').css('background-image', $(this).children('img').attr('src')); 
}, function(){ 
    $('#changeme').css('background-image', ''); 
});

來源

2010-06-21 13:03:22 jAndy

如何在鼠標上更改div背景圖片？

回答

相關問題