“‘Active”而不是:触摸设备的鼠标悬停

Question

我使用:hover在鼠标悬停时显示一个菜单不透明--显然这对触摸设备不起作用。这个fiddle显示了我试图实现的目标(向下滚动查看透明度)。在我的完整示例中，我使用复选框下拉子菜单，效果很好。

显然，我不能使用CSS遍历“向上”，所以选中复选框不会影响祖辈nav。有人有什么建议吗？是否有某种遍历DOM的:active或等价物？

我不确定我是否说得特别清楚，但任何帮助都将不胜感激。我怀疑唯一的解决方案可能是jquery？

Answer 1

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

Answer 2

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

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

你也可以尝试寻找一些你特别想要瞄准的触控设备。例如：

iPhone < 5：

@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所说的评论。如果handheld在某些设备上不能工作，StackOverflow有相当多的关于它的信息，以及如何定位特定的设备，并可能更好地检测它们；

Do iPhone / Android browsers support CSS @media handheld?