jQuery image Cycle2 start on hover

Question

I am looking to take the functionality of the Cycle2 Pause On Hover, but implement it to run in reverse. So that the slideshow only starts on hover (and ends when the mouse leaves the images)

Here is the demo below

Cycle2 Pause On Hover - Demo

Here is the code

<div class="cycle-slideshow" 
data-cycle-fx=fadeout
data-cycle-timeout=1000
data-cycle-pause-on-hover="true"
>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
...
</div>

Answer 1

Make sure you remove the data-cycle-pause-on-hover attribute from the cycle-slideshow div.

Then this jQuery code should work

$('.cycle-slideshow').cycle('pause');
$('.cycle-slideshow').hover(function () {
    //mouse enter - Resume the slideshow
    $('.cycle-slideshow').cycle('resume');
},
function () {
    //mouse leave - Pause the slideshow
    $('.cycle-slideshow').cycle('pause');
});