'Active'而不是：触摸设备的悬停[重复]答案

【问题标题】：'Active' instead of :hover for touch devices [duplicate]'Active'而不是：触摸设备的悬停[重复]
【发布时间】：2013-04-25 05:11:31
【问题描述】：

我正在使用:hover 来显示当鼠标悬停在上方时使菜单不透明 - 显然这不适用于触摸设备。这个fiddle 显示了我想要实现的目标（向下滚动以查看透明度）。在我的完整示例中，我使用复选框来下拉子菜单，效果很好。

显然我不能使用 CSS 向上遍历，所以选择一个复选框我不能影响祖父母 nav。有没有人有什么建议？是否有某种 :active 或等效的遍历 DOM？

我不确定我是否让自己特别清楚，但我们将不胜感激。我怀疑唯一的解决方案可能是 jquery 解决方案？

【问题讨论】：

标签： jquery css

【解决方案1】：

在移动设备上完全避免不透明效果更简单。也就是说，如果客户端在触摸设备上，则将 opacity 设置为 1。

【讨论】：

【解决方案2】：

使用媒体查询为手持设备做其他事情；

@media handheld {
    /* .myHoverElement:active { }*/
}

您也可以尝试寻找一些您特别想要定位的触控设备。例如；

iPhone

@media handheld and (device-aspect-ratio: 2/3) {}

iPhone 5：

@media handheld and (device-aspect-ratio: 40/71) {}

iPad：

@media handheld and (device-aspect-ratio: 3/4) {}

至于cimmanon 的评论。 StackOverflow 有很多关于它以及如何定位特定设备的信息，如果handheld 在某些设备上不起作用，可能会更好地检测它们；

【讨论】：