2

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

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

我不确定我是否让自己特别清楚,但任何帮助将不胜感激。我怀疑唯一的解决方案可能是 jquery 一个?

4

2 回答 2

1

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

于 2013-04-24T21:03:39.480 回答
1

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

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

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

iPhone < 5:

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

iphone 5:

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

平板电脑:

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

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

iPhone / Android 浏览器是否支持 CSS @media 手持设备?

于 2013-04-24T21:03:01.997 回答