CSS 悬停

什么是 CSS 悬停？

CSS 中的 :hover 选择器会在光标悬停在元素上时为其应用样式。它常用于创建交互式效果或在用户与元素交互时吸引对其的注意。

您可以使用标签名、类名或 ID 来使用 :hover 选择器定位元素。

例如

在前面的示例中，当用户将光标悬停在类名为 "button" 的元素上时，背景颜色将变为红色 (#ff0000)，文本颜色将变为白色 (#ffffff)。

通过将 :hover 选择器与其他 CSS 元素（如字体大小、边框或变换）结合使用，可以创建各种悬停效果。它是增强您的网站或应用程序的视觉反馈和交互性的强大工具。

语法

让我们通过 CSS 示例来理解悬停效果。

示例 1

HTML 代码

CSS 代码

说明

在上面的示例中，我们有一个带有 hover-button 类的按钮。该按钮的初始颜色组合是浅灰色背景 (#eaeaea) 和深灰色文本 (#333333)。当鼠标悬停在按钮上时，背景颜色变为红色 (#ff0000)，文本颜色变为白色 (#ffffff)。

通过 0.3 秒的持续时间和缓和的时间函数，hover-button 类中的 transition 属性确保了当鼠标悬停在按钮上时，背景颜色变化的流畅过渡。

其他元素，例如链接（<a>）、图像（<img>）、div（<div>）或任何您希望使其具有交互性的其他元素，都可以使用类似的悬停效果。通过更改 :hover 选择器内的属性和值，您可以创建满足您的设计需求的各种悬停效果。

示例 2：图像缩放效果

HTML 代码

CSS 代码

示例 3：链接下划线效果

HTML 代码

CSS 代码

CSS 悬停功能的特点

通过使用 CSS :hover 功能，您可以改进网页的交互性和视觉效果，它提供了多种优势和功能。以下是一些重要的 CSS 悬停功能：

• 交互效果：通过使用 :hover 选择器在悬停时改变元素的外观，可以创建交互式效果。当用户与您的内容互动时，您可以更改背景颜色、文本颜色、不透明度、盒阴影、变换等属性，为他们提供视觉反馈。
• 定位多个元素：您可以使用 :hover 选择器在页面上定位多个元素。这意味着您可以为各种元素设计标准化的悬停效果，包括按钮、链接、图像、导航菜单以及任何您希望使其具有交互性的其他元素。
• 支持过渡和动画：:hover 选择器可以与 CSS 过渡和动画结合使用，以创建流畅、美观的效果。通过定义过渡或动画属性，您可以指定持续时间、时间函数和其他与动画相关的设置，以控制元素悬停时样式的变化方式。
• 添加其他选择器：:hover 选择器可以与其他 CSS 选择器结合使用，以定位特定元素或在预定义条件应用样式。例如，您可以将 :hover 选择器与类选择器、ID 选择器或伪元素结合起来，创建独特且量身定制的悬停效果。
• 支持可访问性：在开发悬停效果时应考虑可访问性。使用光标的辅助技术用户，例如屏幕阅读器，可能无法访问悬停效果。因此，建议确保主要功能或内容在没有悬停效果的情况下仍然可读且可用。
• 跨浏览器支持：大多数现代 Web 浏览器都支持 CSS :hover 功能。它是许多常用浏览器（包括 Chrome、Firefox、Safari、Edge 等）兼容的 CSS 规范组件。这确保了跨不同平台的视觉效果和行为的一致性。