根据鼠标悬停时的子div属性设置父div的背景图像

出于某种原因,这不适合我。我有下面的代码。

homeShowingWrapper div的背景 homeHero data-featured-image 属性 家庭展示包装 部门。

以下是我的HTML结构:

<div id="homeHero">
    <div class="homeShowingWrapper" data-featured-image="/uploads/Hover-Background.jpg">
        Content
    </div>
</div>

jQuery( document ).ready( function( $ ) {

    $("#homeHero").css("background-image" , "url(/uploads/Initial-Background.jpg);");

    $(".homeShowingWrapper").mouseover(function() {

        // Background-image
        var background = $(this).attr('data-featured-image');

        $("#homeHero").css("background-image" , "url(" + background + ");");

    });

});

知道为什么会这样吗 $("#homeHero").css("background-image" , "url(" + background + ");"); 行不应用背景图像?