我想为支持悬停的浏览器(例如桌面浏览器)和不支持悬停的浏览器(例如触摸屏设备)提供单独的行为.具体来说,我想在支持它的浏览器上声明悬停状态,但不支持那些不支持浏览器的浏览器,以避免移动浏览器使用额外的点击模拟它,因为这会打破页面上的其他交互 – 通过不定义悬停这些浏览器的状态可以避免.
我已经阅读了Interaction Media Queries功能,它看起来应该可以解决问题.我可以做类似的事情:
@media (hover: none) { /* behavIoUr for touch browsers */ }
根据CanIUse,它可用于我需要支持的所有浏览器,IE11和Firefox除外.
所以我想知道我是否可以反过来做 – 因为主要的触摸设备都支持它,然后否定它:
@media not (hover: none) { /* behavIoUr for desktop browsers */ }
但是,这似乎根本不起作用.
我正在尝试做的伪代码示例:
.myelement { /* some styling */ /* note: no hover state here */ } @media(this device supports hover) { .myelement:hover { /* more styling */ } }
那么,有没有办法让这项工作按照预期的方式进行,或者我是否走错了路?
解决方法
不应该前缀媒体类型(屏幕,打印,所有等)而不是媒体功能(悬停,点等).
错误:
@media not (hover: none)
正确:
@media not all and (hover: none)
是的,它不直观且怪异. Source (see comments).
因此,您不需要javascript来替换媒体查询的结果.
原文地址:https://www.jb51.cc/css/217955.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。