jQuery script rollover not compatible on iDevices

Question

I have a jQuery script to manage the roll-over of my images. My script works fine on PC but unfortunately this script isn't compatible with iDevices (iPad, iPhone).

image-normal.jpg <=> image-hover.jpg

Can you help me please ?

$(document).ready(function(){
  $(function () {
    $('img.rollover').hover(function () {
      $(this).css("cursor", "pointer");
      this.src = this.src.replace("-normal","-hover");
    }, function () {
      this.src = this.src.replace("-hover","-normal");
    });
  });
});

Answer 1

Try this:

$(document).ready(function(){
    $(function () {
        $('img.rollover').on('mouseenter touchstart', function(){
            $(this).css("cursor", "pointer");
            this.src = this.src.replace("-normal","-hover");
        });

        $('img.rollover').on('mouseleave touchend', function(){
            this.src = this.src.replace("-hover","-normal");
        });
    });
});

You will still need to touch (click) the image on mobile as there is no hovering.