'Active'而不是：悬停触摸设备

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

iPhone & lt;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所说的评论。StackOverflow有很多关于它的信息，以及如何针对特定的设备，如果handheld不能在某些设备上工作，可能会更好地检测它们;

iPhone/Android浏览器支持CSS @media手持吗?