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

Question

出于某种原因，这对我不起作用。我有以下代码。

当悬停在 homeShowingWrapper div 上时，homeHero div 的背景应该更改为 data-featured-image 属性的值homeShowingWrapper 部分。

这是我的 HTML 结构:

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

还有我的 JQuery 函数:

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 + ");"); 行不应用背景图片？

Answer 1

正如 Nawed Khan 在评论中提到的，读取数据属性的正确方法是使用 data()。

I set up a jsFiddle进行故障排除，发现不仅需要使用data('featured-image')，而且jQuery .css() 中的分号也需要被省略以使其正常工作。