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

【问题标题】：how to change div background image in mouse over?如何在鼠标悬停时更改 div 背景图像？
【发布时间】：2011-03-06 07:35:29
【问题描述】：

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

缩略图菜单位于 diff div 中

【问题讨论】：

标签： javascript jquery mouseover onmouseover

【解决方案1】：

做

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

【讨论】：

【解决方案2】：

纯 CSS 有什么问题？

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

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

【讨论】：

确保使用 CSS Sprite 以避免新图像加载导致的滚动闪烁。这是一个很好的起点：stackoverflow.com/questions/2932566/how-do-css-sprites-work
@Sarfraz - 这可能不是问题，它不适用于我目前的任何项目，希望很快就会到处都是。
@Nick Craver：确实如此，但 IE6 仍然存在，尽管数量较少:(
无论如何我都会使用它。 IE6 的用户将无法体验我网站的全部效果。这是他们的损失。如果我们继续迎合这些用户，他们可能永远看不到升级的需要。（我知道很多用户都在公司环境中，所以这真的取决于 IT 人员......但仍然）

【解决方案3】：

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

【讨论】：

但是url 1 不是固定的，因为我说过我有 7 个缩略图，所以我如何显示七个差异图像？