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

Question

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

将鼠标悬停在 homeShowingWrapper div 上时，homeHero div 的背景应更改为 data-featured-image 属性的值 homeShowingWrapper div.

这是我的 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()中的分号也需要省略让它工作。

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

Set background image of parent div based on attribute of child div on mouseover

css

jquery

background-image