Изменить фоновое изображение со значением атрибута - PullRequest
Новая
       6

Изменить фоновое изображение со значением атрибута

0 голосов
/ 01 октября 2018

У меня есть эта ссылка: 

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

Мне нужно изменить background-image url из другого класса с 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>

любойсовет?спасибо

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Ваш синтаксис неверен для получения attr data-src, используйте этот 

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>
0 голосов
/ 01 октября 2018

Ваш код имеет три проблемы.

  1. Вы должны использовать селектор перед использованием .attr().Поэтому используйте $(this).attr('data-src')

  2. В конце второго параметра .css() есть дополнительный ', который следует удалить

  3. 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>
...