如何在鼠标中更改div背景图像？

Question

我有7个缩略图图像菜单。当用户将(mouseover)指向特定缩略图时，我想将<div>的背景图像更改为该缩略图的相关图像。

缩略图图片菜单位于差异

Answer 1

纯css有什么问题？

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

只需更改div.thumbnail以反映您的div和类或ID名称（如果id .与#一起替换

）

Answer 2

你可以使用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>

Answer 3

DO

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