hover

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

hover CSS @media 可以根据用户的主要输入机制是否可以悬停在元素之上来应用样式。

语法

悬停功能指定为从下面列表中选择的关键字值。

none
主要输入机制无法悬停或不方便悬停(例如,当用户执行不方便的长按操作时,许多移动设备模拟悬停),或者没有主指示输入机制。
hover
主要输入机制可以方便地悬停在元素上。

例子

HTML

<a href="#">Try hovering over me!</a>

CSS

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

结果

规范

Specification Status Comment
Media Queries Level 4
hover
Candidate Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
hover media featureChrome Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Chrome Android Full support 50Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

See also