CSS：用于触摸屏逆向工程的悬停
我发现这个网站，它有一个在我的 iPhone/Pad 上运行良好的子菜单，我我很好奇他们是如何让 li:hover ul{ 适用于触摸屏的？
我已经浏览了整个 HTML、CSS、JS，但没有什么突出的地方，所以如果有人有线索可以看到峰值，我会对他们发现的内容非常感兴趣。
I've found this site which has a sub-menu that works fine on my iPhone/Pad and I’m curious how they made the li:hover ul{ work for a touch screen?
I've looked through the entire HTML, CSS, JS and nothing stands out so if someone cluey can have a peak I’d be very interested in what they find.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我的学校网站 (www.harveygs.kent.sch.uk) 也遇到了同样的问题，但 Servicepoint 网站给了我答案 - 只需添加“(您的菜单标题)”在第一个
之后在您的菜单中。
I had the same problem with my school website (www.harveygs.kent.sch.uk) but the Servicepoint site gave me the answer - simply add "<a href='#'>(your menu header)</a>" after the first <ul> in your menus.
您无法使
:hover在移动设备上运行。菜单在单击事件和悬停事件上显示。我不确定该网站如何执行点击事件，但您可以使用 JavaScript 或使用a:activeCSS 选择器来执行此操作You can't make
:hoverwork on a mobile device. The menu is showing on click events AND hover events. I'm not certain how this site is doing the click events, but you can either do it with JavaScript or with thea:activeCSS selector如果它是一个可以获得焦点的元素，那么悬停 CSS 应该可以在触摸屏上正常工作 - 这些“菜单”项也是链接，因此当它们通过触摸获得焦点时会对悬停事件做出反应。您应该能够使用 amy 元素来执行此操作，该元素可以类似地获得焦点（我使用没有 HREF 属性的链接来执行此操作），以在鼠标经过它或在触摸屏上触摸对象时激活悬停事件。
If it's an element that can gain focus, then the hover CSS should work ok on a touch screen - those "menu" items are also links, so they react to the hover event when they gain focus by being touched. You should be able to do this with amy element that can similarly gain focus (I'm doing it with a link without an HREF attribute) to activate the hover event when the mouse passed over it, or the object is touched on a touchscreen.