title: pause slide on hover
body: <p>I want a particular slide to stop as I hover the mouse on it.</p>
  
  <p>The javascript code I tried :</p>
  
  <pre class="lang-js prettyprint-override"><code>$( ".rotate-slider" ).hover(function() {
    $( this ).find( ".rotate-slider" ).stop( true, true ).fadeOut();
  }, function() {
    $( this ).find( ".rotate-slider" ).stop( true, true ).fadeIn();
  });
  </code></pre>
  
  <p>also I tried to use css to get it :</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.rotating-slide:hover .slider
  {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
  </code></pre>
  
  <p>Unfortunately,none of the above code seems to work.</p>