'有效'而不是:悬停触摸设备

时间:2013-04-24 21:00:42

标签: jquery css

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

显然我不能向上穿越'使用CSS,所以选择一个复选框,我不能影响祖父母nav。有没有人有什么建议?是否有某种:active或等价物遍历DOM?

我不确定我是否特别清楚,但任何帮助都会受到赞赏。我怀疑唯一的解决方案可能是jquery?

2 个答案:

答案 0 :(得分: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) {}

ipad公司:

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

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

Do iPhone / Android browsers support CSS @media handheld?

答案 1 :(得分:1)

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