通過循環為每個唯一的ID設置不同的懸停背景

Question

我正在做一個Wordpress測試項目，其中有一些其他項目的概述頁面。 當我將鼠標懸停在一個項目上時，身體得到與該項目相關的背景。

我編寫了一個循環，將一個唯一的ID＃project-number動態地添加到每個項目中。 為了簡單起見，我在下面的代碼中寫下了ID的本人。 現在，我想添加一個循環，為我添加的每個項目添加懸停支持。 問題在於它們都將需要另一個懸停圖像。 否則，我必須在我添加的每個項目中添加一些jQuery。

的HTML

<div class="row">
  <div class="column12 project-overview" id="project-1">
    <h2>Project 1</h2>
    <p>Type of project - date</p>
  </div>
</div>
<div class="row">
  <div class="column12 project-overview" id="project-2">
    <h2>Project 2</h2>
    <p>Type of project - date</p>
  </div>
</div>
<div class="row">
  <div class="column12 project-overview" id="project-3">
    <h2 class="test">Project 3</h2>
    <p>Type of project - date</p>
  </div>
</div>
<div class="row">
  <div class="column12 project-overview" id="project-4">
    <h2 class="test">Project 4</h2>
    <p>Type of project - date</p>
  </div>
</div>

的CSS

body {
  font-family: Helvetica, sans-serif;
  background: rgba(199, 178, 153, 0.1);
}

jQuery的

var body = $('body');
$(function(){
  $('#project-1').hover(function(){
    body.css('background', 'url(http://placehold.it/1920x1080/6699FF) center top fixed');
    body.css('background-size', 'cover');
  }).mouseleave(function(){
    body.css('background', 'rgba(199, 178, 153, 0.1)');
  });
});
$(function(){
  $('#project-2').hover(function(){
    body.css('background', 'url(http://placehold.it/1920x1080/00FF00) center top fixed');
    body.css('background-size', 'cover');
  }).mouseleave(function(){
    body.css('background', 'rgba(199, 178, 153, 0.1)');
  });
});
$(function(){
  $('#project-3').hover(function(){
    body.css('background', 'url(http://placehold.it/1920x1080/FFFF00) center top fixed');
    body.css('background-size', 'cover');
  }).mouseleave(function(){
    body.css('background', 'rgba(199, 178, 153, 0.1)');
  });
});
$(function(){
  $('#project-4').hover(function(){
    body.css('background', 'url(http://placehold.it/1920x1080/0000FF) center top fixed');
    body.css('background-size', 'cover');
  }).mouseleave(function(){
    body.css('background', 'rgba(199, 178, 153, 0.1)');
  });
});

我做了筆，可以在這里http://codepen.io/linkerd/pen/BsanI獲得 。 非常感謝您的幫助。 我嘗試了幾種選擇，但似乎都沒有用。

Answer 1

 $(document).ready(function() { var body = $('body'); $('.row').hover(function() { body.css({ 'background': 'url(' + $(this).data('bgimage') + ') center top fixed', 'background-size': 'cover' }); }, function() { body.css('background', 'rgba(199, 178, 153, 0.1)'); }); }); 

 body { font-family: Helvetica, sans-serif; background: rgba(199, 178, 153, 0.1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" data-bgimage="http://placehold.it/1920x1080/6699FF"> <div class="column12 project-overview" id="project-1"> <h2>Project 1</h2> <p>Type of project - date</p> </div> </div> <div class="row" data-bgimage="http://placehold.it/1920x1080/00FF00"> <div class="column12 project-overview" id="project-2"> <h2>Project 2</h2> <p>Type of project - date</p> </div> </div> <div class="row" data-bgimage="http://placehold.it/1920x1080/FFFF00"> <div class="column12 project-overview" id="project-3"> <h2 class="test">Project 3</h2> <p>Type of project - date</p> </div> </div> 

您可以使用自定義data-*屬性存儲要在懸停時顯示的圖像。

的HTML

<div class="row" data-bgimage="http://placehold.it/1920x1080/6699FF">
</div>

腳本

var body = $('body');
$('.row').hover(function () {
    body.css({
        'background': 'url(' + $(this).data('bgimage')+ ') center top fixed',
        'background-size': 'cover'
    });
}, function () {
    body.css('background', 'rgba(199, 178, 153, 0.1)');
});

Answer 2

您可以將圖片的url定義為element的data屬性，該屬性將被鼠標懸停在主體上：

這是演示：http://codepen.io/anon/pen/JLfFA

的HTML：

<div class="column12 project-overview" data-bg="http://placehold.it/1920x1080/6699FF">

jQuery的：

$(function(){
  var body = $('body');
  $('.project-overview').hover(function(){
    var target = $(this).attr('data-bg');
    body.css('background', 'url('+ target +') center top fixed');
    body.css('background-size', 'cover');
  }, function(){
    body.css('background', 'rgba(199, 178, 153, 0.1)');
  });
});