it-swarm.asia

Css是否可以在移动设备上使用?

Css是否可以在移动设备上使用?我有一个css悬停类,它可以在常规的Web浏览器上正常工作,但不适用于移动浏览器。

57
Sam

:hover伪类需要一个指向(图形输入)设备,能够区分动作 指向 选择/激活。 通常在具有触摸界面的移动设备上,您没有前者,只有后者。还有一些笔接口只允许激活,而不是指向。

当用户指定一个元素(带有一些指针设备)时,:hover伪类适用,但不会激活它。例如,当光标(鼠标指针)悬停在元素生成的框上时,可视用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持此伪类。支持交互式媒体的一些符合要求的用户代理可能无法支持该伪类(例如,笔设备)。

- W3C:CSS 2.1:选择器,动态伪类

所以,回答你的问题:这取决于设备,但可能没有。并且不要依赖它。随着触摸屏设备迅速普及,您将失去整个仅指向事件。

33
Joey

叹。似乎没有人回答这个问题实际上是在真实设备上尝试过。在许多情况下它确实有效。第一次单击充当悬停。

这里有更多信息: http://designshack.net/articles/css/are-hover-events-extinct/

24
Andy Baker

除非设备能够检测到有人将手指悬停在屏幕上,即将点击。 :)

7
Nathan Long

提问者的意思是“css悬停在移动设备上工作吗?”?

他显然并不是字面意思,因为没有像移动设备上悬停的东西所以它无法工作。

如果他的意思是“在移动设备上如果我点击悬停式的对象会发生什么事吗?”答案是肯定的,但发生的情况因设备/浏览器而异。

特别是在iPhone/Safari和Android上,响应就好像你已经编写了一个OnClick()事件处理程序,其中包含样式更改,并且这一直到你点击另一个对象为止。在Windows手机上,手指按下手机时会发生样式更改,然后在释放手指时恢复。

您可以在我设置的测试站点检查您的设备 davidleader.net/mobiledemo.html

7
David

这取决于移动设备中使用的浏览器。请参阅 Quirks模式 用于移动设备,看看您的浏览器/平台是否会实现它。

3
Digicoder

从我自己的经验来看,它在我的iphone4上运行正常,无论是浏览器(safari还是chrome),但在带有chrome的nexus10上都无法正常工作......

我用过:悬停实现菜单。当我说“它有效”时,我的意思是第一次触摸就像在桌面上悬停一样,第二次触摸就像点击一样。当我说“它不起作用”时,我的意思是触摸表现得像直接点击...

2
dajam

我会说不,因为你没有悬停在移动界面中。你可以按,如果在触摸屏上。否则你只需要浏览链接。

0
Dustin Laine

也可用于黑莓风暴1设备,因为它们具有触摸功能,并且由于它们的触觉屏幕而点击事件。

0
rlemon

不会在触摸屏设备上发挥其魔力,但它确实适用于用户使用某些箭头键(或在亚马逊Kindle上)导航的手机

0
silverskater

:hover适用于Android默认浏览器,但是(对于用户来说)触发悬停而不会同时触发点击非常棘手。

0
peq