title: pause on hover for simple jquery carousel
body: <p>I've set up an example of a super simple functioning carousel here:</p>
  
  <p><a href="http://codepen.io/anon/full/myvAz" rel="nofollow">http://codepen.io/anon/full/myvAz</a></p>
  
  <p>The problem is, I cannot get the carousel to stop rotating on hover.</p>
  
  <p>I can't even get an alert to fire on hovering over the containing div, even though it has a set width and height.
  I can however get am alert to fire if i paste the hover section into console.</p>
  
  <p>It just doesn't seem to fire when combined with the other code.</p>
  
  <p>Any help would be gratefully appreciated</p>
  
  <p>Thanks</p>
  
  <p>Heres the code:</p>
  
  <pre><code>&lt;script&gt;
  // Main image carousel
  $(document).ready(function(){
  $("#headerMrS &gt; div:gt(0)").hide();
  
  var carouDiv = function(){
      setInterval(function() { 
        $('#headerMrS &gt; div:first')
          .fadeOut(500)
          .next()
          .fadeIn(500)
          .end()
          .appendTo('#headerMrS');
      },  2000);
  };
  
  $(carouDiv());//Initialise the carousel function
  
  $("#headerMrS").hover(function(){//Stop the carousel on hover
   $(this).stop;
    },function(){
    $(this).resume;
  });
  
  
  //Direction Arrow links
  $(".button-sales").click(function(){
      $(".header").fadeOut(800);
      $(".sales").animate({opacity:"show"},800);
  });
  $(".button-modern").click(function(){
      $(".header").fadeOut(800);
      $(".modern").animate({opacity:"show"},800);
  });
  $(".button-antique").click(function(){
      $(".header").fadeOut(800);
      $(".antique").animate({opacity:"show"},800);
  });
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;style&gt;
  
  #headerMrS {position:relative; height:150px; width:350px}
  .header {position:absolute; top:0; left:0}
  &lt;/style&gt;
  
  &lt;div id="headerMrS"&gt;
  &lt;div class="header sales active"&gt;
      &lt;div class="header-content"&gt;
          &lt;img src="http://placehold.it/350x150/4787ed/ffffff" alt="" /&gt;
          &lt;div class="button-next button-antique"&gt;next&lt;/div&gt;
          &lt;div class="button-prev button-modern"&gt;prev&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="header antique"&gt;
      &lt;div class="header-content"&gt;
          &lt;img src="http://placehold.it/350x150/fc8a41/ffffff" alt="" /&gt;
  
          &lt;div class="button-next button-modern"&gt;next&lt;/div&gt;
          &lt;div class="button-prev button-sales"&gt;prev&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="header modern"&gt;
      &lt;div class="header-content"&gt;
          &lt;img src="http://placehold.it/350x150/e7376b/ffffff" alt="" /&gt;
  
          &lt;div class="button-next button-sales"&gt;next&lt;/div&gt;
          &lt;div class="button-prev button-antique"&gt;prev&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>