当按下按钮时禁用iOS的行为：悬停状态

Question

因此，我经常在使用我的iPad时点击网站上的按钮，而iOS所做的是实际切换设计者创建的悬停状态，而这只是为了成为一个实际的：悬停事件。我制作了一个正在遭受这种毫无意义行为的网站。 例如，您可以点击一个不离开页面的按钮，但在iOS中，它会永久显示该按钮的悬停状态。 如何优雅地删除这个想法不明的行为 ？

Answer 1

通过添加新的CSS文件，并使用条件注释的最大宽度的设备，然后在例如这些新的css文件重置悬停状态...

iPhone

<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/iphone.css" type="text/css" title="no title"/> 

的iPad

<link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/> 

然后只是调整什么CSS输出这些设备。

Answer 2

这将需要一些JavaScript，但这是我能想出的最佳解决方案。

基本上你会覆盖默认样式，然后切换一个类而不是依靠悬停事件。

我会说这个解决方案是非常简单，让用户既能够单击顶级链接，展开/折叠链接

的HTML

<ul> 
    <li><a href="some-url">link name <span></span></a> 
     <ul> 
      <li><a href="some-url">link name</a></li> 
     </ul> 
    </li> 
    <li><a href="some-url">link name <span></span></a></li> 
    <li><a href="some-url">link name <span></span></a></li> 
</ul> 

的CSS

li{width:200px;} 

li a span{ 
    display:inline-block; 
    height:10px; 
    width:10px; 
    background:#000; 
    float:right; 
} 
/* Standard menu system */ 
li ul{display:none} 
li:hover ul {display:block} 


/* Override for ios */ 
/* Needs to be inside some media query */ 
/* Something like @media(max-width:497px) */ 

li:hover ul{display:none;} 

li.hovered ul{display:block} 

的JavaScript（jquer Y）

$('nav li a span').click(function (e) { 
     e.preventDefault(); 
     $('nav li').not($(e.target).parents('li')).removeClass('hovered'); 
     $(e.target).parent('a').parent('li').toggleClass('hovered'); 
    }) 

工作的jsfiddle

http://jsfiddle.net/styks1987/DY6kS/2/