:hover

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

CSS 中的 :hover 伪类在鼠标光标当前悬停在元素上时选择元素。 它通常与链接 (<a>) 元素相关联。

a:hover {
  color: green;
  text-decoration: underline overline;
}

因此,当像这样的链接“悬停”(例如在带有鼠标的设备上使用光标)时

<a href="https://google.com">Go to Google</a>

它将变成绿色,并在其下方和上方有一条线。

在 IE 6 及更低版本中, :hover 过去  适用于链接,但在较新的浏览器中,它适用于任何元素。 这对于下拉菜单等内容特别有用,在这些内容中,您可以等待父列表项的 :hover ,然后显示嵌套菜单的下一级。 但请注意,悬停效果应与某种操作结合使用,因为这长期以来一直是已建立的 Web 模式。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
全部全部全部全部全部全部
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部全部全部全部
来源: caniuse