使用属性值更改背景图像

Question

我有这个link:

<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg"></div>

我需要在悬停事件上将 background-image url 从另一个 class 更改为 data-url。我现在尝试这个但不起作用：

var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');    
jQuery('.wp-show-posts-inner').on('mouseover',function() {    
  jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});
});

这个脚本给我这个结果：

element.style {
  background-image: url((unknown));
}

我需要这个：

<div class="bg" style="background-image: url(http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg);"></div>

有什么建议吗？谢谢

Answer 1

您的代码存在三个问题。

您应该在使用 .attr() 之前使用选择器。所以使用 $(this).attr('data-src')
在 .css() 的第二个参数末尾还有一个应该删除的额外 '
css background-image 属性应该包裹成 url()

所以你的代码应该改为

$('.wp-show-posts-inner').hover(function() {    
    $('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});

$('.wp-show-posts-inner').hover(function() {    
  $('.home-banner .bg').css('background-image', "url("+$(this).attr('data-src')+")");
});

.bg {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner</div>
<div class="home-banner">
  <div class="bg">bg</div>
</div>

Answer 2

您获取 attr 数据源的语法错误，请使用此

var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');
jQuery('.wp-show-posts-inner').on('mouseover',function() {    
      jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});
});
jQuery('.wp-show-posts-inner').on('mouseleave',function() {    
      jQuery('.home-banner .bg').css({'background-image': "url()"});
});

.bg{height:100px;width:100px;}
.wp-show-posts-inner{height:100px;width:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-banner">
<div class="bg">

</div>
</div>
<div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner (Hover on me)</div>

使用属性值更改背景图像

Change background-image with attribute value

html

javascript

css

jquery

background-image