Mouseenter Mouseleave on iPad

Question

I am working on this website , and as you can see I have a table animated via JavaScript. On mouseenter mouseleave on the table's rows you can display a different <img> on the right.

On desktop and Android it works, but not on iPad.

This is a part of the JS Code I'm using:

<script>
jQuery(document).ready(function($){
    $(document.body).on("mouseenter mouseleave", ".row1", function() {
        $('.two_1').toggle();
    });
});
</script>

How can I fix it?

Answer 1

According to Apple device, there is no mousestart, mousemove and mouseend . Instead, there have touchstart, touchmove and touchend . So, for your requirement, you should specify like this :

$(document.body).on("touchstart", ".row1", function() {
    $('.two_1').toggle();
});

Hope it helps :)

( Note: I didn't test this code in Iphone, but i am sure it will work )