Question

As we know hover effect dose not allow in iPad, but i want to change button image when user click on the button. Below css work fine except iPad and iPhone device.

.back-btn {
background: url("images/sprite.png") no-repeat scroll 0 0 transparent;
}
.back-btn:hover, .back-btn:active {
background: url("images/sprite.png") no-repeat scroll 0 -10px transparent;
}

Thanks
AV

Answer 1

The problem is you need to look for the touchstart event for the iPad to recognize it, and you can set the hover event otherwise. With a little browser sniffing – boom you should be good to go. (jQuery-wise)

var ua = navigator.userAgent,
    event = (ua.match(/iPad/i)) ? "touchstart" : "hover";

$(".back-btn").bind(event, function(e) {
    $(this).css('background', 'url("images/sprite.png") no-repeat scroll 0 -10px transparent;');
});

More information on html5 touch events here.