javascript - 如何在鼠标悬停时更改 div 背景图像？

Question

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

缩略图菜单位于 diff 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_classand的位置，例如mouseout_class

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

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

Answer 3

做

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