Question

Im mobile optimizing a site and ive made a flyout menu. Ive disabled changing the colour of the menu button on :hover. I did this as the iPhone considers the last clicked to keep the hover pseudo-class.

However now im testing on blackberry and they have an desktop style cursor and so would benefit from the element changing colour on mouseover.

Is it possible to disable the hover color for iPhones but not for blackberrys? More generally, is there a way to have a hover color only for non-touch screen devices like blackberrys, as only they can really mouseover.
Thanks

Answer 1

This answers the first part of your question.
Try using Modernizr and then adding an appleOS test.

Modernizr.addTest('ipad', function () {
  return !!navigator.userAgent.match(/iPad/i);
});

Modernizr.addTest('iphone', function () {
  return !!navigator.userAgent.match(/iPhone/i);
});

Modernizr.addTest('ipod', function () {
  return !!navigator.userAgent.match(/iPod/i);
});

Modernizr.addTest('appleios', function () {
  return (Modernizr.ipad || Modernizr.ipod || Modernizr.iphone);
});

From there, you could add a class to the body if it’s iOS and apply the hover classes for only non-iOS devices.

Ideally, you could just use the “notouch” body class that Modernizr adds to browser that don’t support touch, but in my experience it does not add this class to Blackberry browsers, even if the device doesn’t support touch. Let me know if you find differently!