title: Meteor Jquery event to change to new background image on hover
body: <p>Requirement:  Change background image on hover to a new image.</p>
  
  <p>I have some 4 images for which I want a new image to b displayed  in background every time hover.</p>
  
  <blockquote>
    <p>This particular thing works without meteor but not on meteor. I am new
    to it and pretty much clueless.</p>
  </blockquote>
  
  <pre><code>&lt;body&gt;
      &lt;a href="#" id="yes" class="btn btn-primary"&gt;Yes&lt;/a&gt;
      &lt;a href="#" id="no" class="btn btn-danger"&gt;No&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>Template.body.events({
      "mouseover #no": function(){
          console.log ("mouseover success");
          var imgs=['http://www.gstatic.com/webp/gallery/1.jpg','http://www.gstatic.com/webp/gallery/2.jpg','http://www.gstatic.com/webp/gallery/3.jpg','https://www.gstatic.com/webp/gallery3/1.png'];
          var current = imgs.indexOf($('body').css('background-image'));
          $('body').css('background-image',imgs[++current] || imgs[0]);
      }
  })
  </code></pre>