:hover如果用户通过触摸设备访问我们的网站,我想忽略所有CSS声明.因为:hoverCSS没有意义,如果平板电脑在点击/点击时触发它,它甚至会令人不安,因为它可能会坚持直到元素失去焦点.说实话,我不知道为什么触摸设备:hover首先需要触发- 但这是现实,所以这个问题也是现实.
a:hover {
color:blue;
border-color:green;
// etc. > ignore all at once for touch devices
}
那么,(如何):hover在声明触摸设备之后,我可以一次性删除/忽略所有CSS 声明(不必知道每一个)吗？
:hover CSS伪类在触摸设备上不能很好地工作.悬停状态趋于持续直到触及其他东西.因此,在我们的网络应用程序中,我们使用Modernizr来检测具有触摸功能的浏览器/设备,并在这些情况下禁用悬停状态:
.no-touch .button:hover {...}
这在支持触摸屏和指针设备(例如鼠标或触摸板)的混合设备上成为问题.Modernizr检测到它是启用触摸的,并且在使用鼠标时没有任何悬停状态.
更有用的是检测鼠标或其他指针设备的存在而不是触摸屏.但是我找不到这样的东西.
有什么建议？
@support规则允许用户对CSS属性进行功能查询.我想知道是否可以对@media规则进行功能检查？
例如,我想知道浏览器是否支持@media指针或任何指针条件:
@supports @media (pointer:fine) {
要么
@supports @media (pointer) {
这似乎不起作用.应该有用吗？
编辑:这不是引用问题的副本.也许我应该澄清这个问题来解释为什么这是一个不同的问题,所以这里是:
我不想在@media中嵌套@supports,反之亦然.我想要检测是否支持@media查询本身,特别是指针的@media规则.这与在媒体查询中嵌套随机支持查询完全不同.
两个条目的文档是相同的。
我过去@media (hover: hover) {...}只在桌面上运行一个样式来悬停，显然有些智能手机也会错误地运行它，将替换为any-hover解决问题。如果是，为什么？否则，承诺区分移动/桌面行为（尤其是悬停时的功能）。
在谷歌或这里两天后我找不到区别，也许是用户的主要输入机制故事，但不是很清楚......
谢谢
我正在尝试否定max-device-width媒体查询（这样做的原因是我不会两者兼而有之(max-device-width: X)，(min-device-width: X)如果设备恰好具有该宽度则触发）。不幸的是，not (min-or-max-some-width: X)媒体查询永远不会触发。
这是一个小小提琴。我希望桌面上有两条黄线，移动设备上有两条红线。我得到的是桌面上只有一条黄线（最后一条），而移动设备上只有一条红线（第一条）。
我究竟做错了什么？