Apple iPhone/iPad IOS Simulate :hover Tutorial

View Demo

With the rule -webkit-transition:all 0.3s ease-in-out; (and possibly others) in place iOS won't hover unless you add display:none/display:block or display:table/display:block. Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link. So if you find the iOS device won't (or correctly) hover for whatever reason here is your probable fix.

/* iPad & iPhone simulate :hover */
@media (min-device-width:320px) and (max-device-width:768px) {
	b {
	display:none;
	}
	a:hover b {
	display:block;
	} 
}

ADVERTISE HERE