Hover on touch devices.js

$(function() {
  $('.hover').bind('touchstart touchend', function(e) {
    e.preventDefault();
    $(this).toggleClass('hover-effect');
  });
});

In english: 
when you start or end a touch, turn the class hover-effect on or off.
Then, in your HTML, add a class hover to anything you want this to work with. In your CSS, replace any instance of:

element:hover {
  rule:properties;
}

with

element:hover, element.hover-effect {
  rule:properties;
}

And just for added usefulness, add this to your CSS as well:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

To stop the browser asking you to copy/save/select the image or whatever.