Question

我正在进行一个Wordpress测试项目，其中我有一些其他项目的概述页面。当我将鼠标悬停在项目上时，正文将获得与项目相关的背景信息。

我写了一个循环，为每个项目动态添加一个唯一的#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

您可以将图像网址定义为元素的数据属性，将鼠标悬停在主体上：

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

设置不同的背景悬停到每个唯一的ID与循环

2 个答案: