title: Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?
body: <p>I have some css menus on my site that expand with <code>:hover</code> (without js)</p>
  
  <p>This works in a semi-broken way on iDevices, for example a tap will activate the <code>:hover</code> rule and expand the menu, but then tapping elsewhere doesn't remove the <code>:hover</code>. Also if there is a link inside the element that is <code>:hover</code>'ed, you have to tap twice to activate the link (first tap triggers <code>:hover</code>, second tap triggers link).</p>
  
  <p>I've been able to make things work nicely on iphone by binding the <code>touchstart</code> event.</p>
  
  <p>The problem is that sometimes mobile safari still chooses to trigger the <code>:hover</code> rule from the css <i>instead</i> of my <code>touchstart</code> events!</p>
  
  <p>I know this is the problem because when I disable all the <code>:hover</code> rules manually in the css, mobile safari works great (but regular browsers obviously don't anymore).</p>
  
  <p>Is there a way to dynamically "cancel" <code>:hover</code> rules for certain elements when the user is on mobile safari?</p>
  
  <p>See and compare iOS behavior here: <a href="http://jsfiddle.net/74s35/3/" rel="noreferrer">http://jsfiddle.net/74s35/3/</a>
  Note: that only some css properties trigger the two-click behavior, e.g. display:none; but not background: red; or text-decoration: underline;</p>