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

时间:2019-01-29 21:29:05

标签: jquery css background-image

由于某种原因,这并不适合我。我有以下代码。

将鼠标悬停在db.regextest.aggregate([ { $match: { $expr: { $eq: [ { $toLower: "$first" }, { $let: { vars: { firstLen: { $strLenBytes: "$first" }, secondLen: { $strLenBytes: "$second" } }, in: { $toLower: { $substr: [ "$second", { $subtract: [ "$$secondLen", "$$firstLen" ] }, "$$firstLen" ] } } } } ] } } } ]) div上时,homeShowingWrapper div的背景应更改为homeHero div的data-featured-image属性的值。

这是我的HTML结构:

homeShowingWrapper

还有我的JQuery函数:

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

1 个答案:

答案 0 :(得分:2)

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

I set up a jsFiddle进行故障排除,发现不仅需要使用data('featured-image'),而且还需要省略jQuery .css()中的分号才能起作用。 / p>