Set different background on hover to each unique id with a loop

1 Views

I am doing a WordPress test project where I have an overview page for some other projects. When I hover over a project, the body get’s a background related to the project.

I wrote a loop adding an unique id of #project-number to each project dynamically. For simplicity, I wrote the ID’s myself in the code below. Now I would like to add a loop that adds the hover support for every project I add. The problem is that they will all need another hover image. Otherwise I would have to add some jQuery with every project I add.

Read More

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

I made pen, which is available here http://codepen.io/linkerd/pen/BsanI .
Would really appreciate some help. I tried several options, but none seemed to work.

Post Views: 1

Related posts

Leave a Reply

2 comments 

  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>

    You can use custom data-* attributes to store image to be displayed on hover.

    HTML

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

    Script

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

  2. You can define image url to element’s data attribute which will be replaced on body with mouse over:

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