javascript - 使用 jQuery 将鼠标悬停在 div 上时更改背景图像

Question

HTML 设置

我的设置如图所示。我希望用户将鼠标悬停在每个红色框上，当鼠标悬停在每个框上时，我希望背景(现在为灰色)更改为背景图片。不同的图片有不同的盒子。在我的 CSS 中，我有:

#service {
background: grey;}

我写了这个 jQuery 代码:

$service = $('#service');
$('.service-list').on('mouseover', 'div', function() {
    $service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
});

但它不起作用。我还希望预加载背景图片，因为它们大约 650kb，所以它流畅且即时。我打算制作一个名为 preload 的 div，然后执行

<img src="path/image-01.png" width="1" height="1" alt="Image 01" />

然后执行预加载，不显示任何内容。我不知道这是否可行。请帮忙

编辑----只是要明确的是，我想改变的是services div的背景，而不是各个红框的背景

Answer 1

您可以通过jquery悬停功能来实现这一点。

$service = $('#service');

$('.greay-box').hover(function() {
    $service.css('background-image', 'url(' + $(this).attr("data-uri") + ')');
        }, function(){

    $service.css('background-image', '');

    });

这是一个示例 fiddle 。希望这对您有帮助。