hover的CSSdynamic导航 – 如何让它在iOS Safari中工作？

在我的网站中，我只使用了CSS的dynamic菜单。 这在桌面浏览器中很好，但在iOS（iphone，ipad等）上却不行，因为触摸界面不支持:hoverselect器。

我的问题是：在iOS上支持这个最好的方法是什么？ （理想情况下，通过修补一些CSS，或使现有的代码工作，而不是整个事情只是为了支持iOS的Javascript）

我的html看起来像这样

 <ul id="nav"> <li> Item 1 <ul> <li><a href=''>sub nav 1.1</a></li> <li><a href=''>sub nav 1.2</a></li> </ul> </li> <li> Item 2 <ul> <li><a href=''>sub nav 2.1</a></li> <li><a href=''>sub nav 2.2</a></li> </ul> </li> <li> Item 3 <ul> <li><a href=''>sub nav 3.1</a></li> <li><a href=''>sub nav 3.2</a></li> </ul> </li> </ul> ​​​​​ 

而CSS就是这样

 #nav li { float:left; padding:0 15px; } #nav li ul { position: absolute; width: 10em; left: -999em; margin-left: -10px; } #nav li:hover ul { left: auto; } 

我在这里做了一个jsfiddle： http : //jsfiddle.net/NuTz4/

Answer 1

检查这篇文章，也许这是一个解决scheme;）

http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/

另外JS解决scheme，取自： http : //www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

 var nav = document.getElementById('nav'); var els= nav.getElementsByTagName('li'); for(var i = 0; i < els.length; i++){ els[i].addEventListener('touchstart', function(){this.className = "hover";}, false); els[i].addEventListener('touchend', function(){this.className = "";}, false); } 

在jQuery中：

 $('#nav li').bind('touchstart', function(){ $(this).addClass('hover'); }).bind('touchend', function(){ $(this).removeClass('hover'); }); 

CSS：

 li:hover, li.hover { /* whatever your hover effect is */ }