javascript 带有悬停的 CSS 动态导航 - 如何使其在 iOS Safari 中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3501586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Dynamic Navigation with Hover - How Do I make it work in iOS Safari?
提问by DanSingerman
In my site I use a CSS only dynamic menu. This is fine in desktop browsers, but not on iOS (iphone, ipad, etc) because the touch interface does not support the :hoverselector.
在我的网站中，我只使用 CSS 动态菜单。这在桌面浏览器中很好，但不适用于 iOS（iphone、ipad 等），因为触摸界面不支持:hover选择器。
My question is: what is the best way of supporting this on iOS? (Ideally either by patching with some CSS, or Javascript that will make the existing code work, rather than doing the whole thing over just to support iOS)
我的问题是：在 iOS 上支持此功能的最佳方式是什么？（理想情况下，要么通过修补一些 CSS 或 Javascript 使现有代码正常工作，而不是仅仅为了支持 iOS 而完成整个事情）
My html looks like this
我的 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> ?????
And the CSS is this
而 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;
}
I have done a jsfiddle of this here: http://jsfiddle.net/NuTz4/
我在这里做了一个 jsfiddle：http: //jsfiddle.net/NuTz4/
回答by BGerrissen
Check this article, perhaps it's a solution for you ;)
检查这篇文章，也许它是您的解决方案；）
http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/
http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/
Also JS solution, taken from: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/
还有 JS 解决方案，取自：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);
}
In jQuery:
在 jQuery 中：
$('#nav li').bind('touchstart', function(){
$(this).addClass('hover');
}).bind('touchend', function(){
$(this).removeClass('hover');
});
css:
css：
li:hover, li.hover { /* whatever your hover effect is */ }
