悬停的CSS动态导航-如何让它在iOS Safari中工作？
提问于 2010-08-17 10:48:31
在我的网站中，我只使用CSS动态菜单。这在桌面浏览器中很好，但在iOS (iphone、ipad等)上就不行了，因为触摸界面不支持:hover选择器。
我的问题是:在iOS上支持这一点的最佳方式是什么？(理想情况下，要么用一些CSS打补丁，要么用Javascript让现有代码正常工作，而不是仅仅为了支持iOS而重新做整个事情)
我的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/
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-08-17 10:53:03
查看这篇文章，也许它是您的解决方案;)
http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-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);
}在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 */ }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3501586
复制
腾讯云开发者
