在悬停时设置不同的背景，使每个唯一的id具有一个循环。

Question

我正在做一个Wordpress测试项目，在那里我有一个其他项目的概述页面。当我悬停在一个项目上时，身体会得到一个与项目相关的背景。

我编写了一个循环，动态地向每个项目添加一个#项目编号的唯一id。为了简单起见，我在下面的代码中自己编写了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

您可以将图像url定义为元素的数据属性，该属性将在主体上用鼠标替换：

Here is demo: 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)');
  });
});

Answer 2

​

$(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)');
});