了解 CSS 悬停效果：提升网站互动性的关键
当今，大多数现代网站都依赖层叠样式表 (CSS) 来实现其视觉呈现。 某些网站可能仅采用基础的 CSS 样式，而另一些则会利用更高级的功能来增强其 Web 应用的吸引力。通过添加引人入胜的效果，您可以显著提升网站的点击率，鼓励用户积极互动，并延长他们在您网站上的停留时间。
本文将深入探讨 CSS 悬停效果的概念，揭示其如何使您的网站更具吸引力，并指导您如何实现这些效果。我们还将通过具体的示例，展示如何在网站上应用经典的 CSS 悬停效果。
什么是 CSS 悬停效果？
CSS 悬停效果会在用户将鼠标指针悬停在网站元素上时触发。 这种互动可能导致元素的外观发生变化，例如颜色、文本或其他动画效果。通过在网站上添加这些效果，您可以增强用户体验，提高网站的交互性并使其更易于导航。
CSS 悬停效果主要通过两种方式呈现：过渡和动画。
过渡
过渡效果使您可以平滑地改变网页元素的外观或行为。 这些效果需要一个触发器，例如用户将鼠标悬停在特定元素上。 一旦触发，过渡会从初始状态平滑地移动到最终状态。值得注意的是，过渡仅执行一次，且不允许您指定中间点。
动画
动画效果具有关键帧，允许它们重复播放、循环，并从初始状态流畅地过渡到最终状态。 与过渡不同，动画可以包含中间状态。关键帧定义了动画元素在动画序列中特定时间点的呈现方式。
CSS 悬停效果的类型
CSS 悬停效果可以应用于各种类型的元素，包括文本、图像、视频、链接和按钮。 以下是一些主要应用：
#1. 文本悬停效果
当您追求简约的网站设计时，文本悬停效果是一个理想的选择。 设计应保持简洁，但仍能有效传递信息。 文本悬停效果可以有多种形式：
- 终端文本效果：这种效果模拟在文本编辑器中打字的过程，文本会闪烁，但速度适中，以便用户阅读。
- 文本动画： 这种效果可以使文本向上、向下或横向移动。
#2. 链接悬停效果
大多数网站都包含大量的超链接，将用户引导至不同的页面。 随着网站的发展，链接的数量也会不断增加。 链接悬停效果可以有以下几种表现形式：
- 更改链接颜色：例如，当鼠标悬停时，链接的颜色可以从蓝色变为红色。
- 更改背景颜色：这种效果会改变链接的背景颜色，使其在悬停时更加突出。
- 文本交换：此效果可以使链接的文本内容在悬停时发生变化。
#3. 按钮悬停效果
按钮在网站中扮演着重要的角色，用户通过它们提交表单并访问网站的不同部分。 按钮悬停效果可以通过以下方式实现：
- 文本颜色变化： 例如，“点击我”按钮的文本颜色可以在悬停时从红色变为绿色。
- 改变背景颜色： HTML 按钮通常默认是透明的，开发者可以为其添加背景颜色。 悬停时，背景颜色可以发生变化，例如从棕色变为绿色。
- 弹跳效果：您可以使按钮在悬停时产生弹跳动画，从而增加视觉吸引力。
#4. 图片悬停效果
- 交换图像：您可以创建轮播效果，在悬停时显示不同的图像。
- 淡入/淡出图像：当用户悬停在图像上时，这种效果会使图像逐渐清晰显示或淡出。
信息显示： 许多网站会隐藏图像的相关描述信息，并在用户悬停时显示这些信息。 例如，旅游网站可能会在用户悬停时显示酒店的详细信息。
接下来，我们将详细介绍一些经典的 CSS 悬停效果，以帮助您提升网站的视觉效果。
悬停时更改背景颜色
此效果适用于网页上显示的各种元素，包括按钮、链接或文本。 一旦鼠标光标接触到目标元素，其背景颜色就会发生改变。
您可以按照以下步骤来更改文本的背景颜色：
- 使用 :hover 伪类来实现悬停效果。
- 创建一个您想要应用悬停效果的元素，例如 div、按钮或链接。
以下代码示例展示了如何实现此效果。
HTML 文件：
<div> Hover and see me change!!!!! </div>
CSS 文件：
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
悬停前的效果：
悬停后的效果：
悬停时更改链接颜色
链接是网页上不可或缺的元素，它们允许用户从一个页面跳转到另一个页面。 我们通常使用 HTML <a> 标签创建超链接。 通过在悬停时改变链接的颜色，可以显著提高链接的可见性。
要实现这种效果，您需要：
- 在 :head 或 :body 标签中创建一个选择器。
- 定义 :hover 伪类。
下面的示例代码展示了如何在悬停时将链接颜色从绿色变为橙色。
HTML 文件：
<div> <a href="#">Hover over me and see the magic</a> </div>
CSS 文件：
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
悬停前的效果：
悬停后的效果：
悬停时滑动突出显示
当用户将鼠标悬停在链接上时，此效果会在链接周围添加一个内阴影，并且链接的颜色也会随之改变。 您可以参考以下步骤来实现此效果：
- 在链接周围添加一定的填充（例如 0.25rem）。
- 添加相同值的边距，以防止填充影响文本的正常排列。
以下是一个简单的 HTML 文件示例：
<a href="#">techblik.com</a>
这是相应的 CSS 文件示例：
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}
悬停前的效果：
悬停后的效果：
悬停时的彩虹下划线
此效果会在用户悬停时为文本添加一个包含多种颜色的下划线。
- 使用 :linear-gradient 伪类创建不同颜色之间的平滑过渡。
- 使用 :hover 伪类来实现悬停效果。
- 创建一个链接元素，您将在其中实现悬停效果。
以下代码示例展示了如何在悬停时实现彩虹下划线效果：
HTML 文件：
<div> <p>This is <a href="#">Rainbow</a> hover effect. </p> </div>
CSS 文件：
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}
悬停前的效果：
悬停后的效果：
悬停时文本交换
文本交换指的是当用户将鼠标悬停在目标元素上时，文本内容会被另一段文本或内容替换。 一个典型的例子是网站上的“评论”链接，当用户悬停时，链接的文本可能会变为“添加评论”。
要在悬停时实现文本交换，您需要：
- ::before 和 ::after 伪元素 – 它们为悬停后要交换的文本创建单独的元素。
- :hover 伪元素 – 用于在悬停时改变内容的位置或可见性。
以下是如何实现此效果的说明：
HTML 文件：
<button><span>99 comments</span></button>
CSS 文件：
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
悬停前的效果：
悬停后的效果：
具有出色悬停效果的网站
如果您正在寻找灵感，可以参考以下这些网站：
#1. Canva
Canva 是一个知名的设计平台，它帮助非专业设计师创建精美的设计作品。该网站在其主页和产品页面上都使用了出色的悬停效果。例如，主页的初始背景是深色模糊的，但当鼠标悬停时，背景会变得清晰，图片也会变得可见。 当您选择不同的设计模板时，也会出现类似的悬停效果。
#2. Haus
Haus 是一个展示多种悬停效果的绝佳示例，包括悬停时添加下划线、悬停时文本交换，以及悬停时改变背景颜色。
#3. Mainworks
Mainworks 在其悬停效果中使用了动画和过渡效果。 一些值得注意的效果包括悬停时文本交换、文本颜色变化以及悬停时缩放文本和图像。
结论
为您的网站选择合适的悬停效果取决于您网站的类型、您的技能水平、个人品味和偏好。 一些网站，例如艺术品和优惠券平台，可能会选择更炫酷的悬停效果，而法律和医疗网站则可能更倾向于简约的悬停效果。
因此，您必须仔细考虑哪种效果最适合您的网站。 同时，请确保这些效果与您的品牌颜色保持一致。 您还可以参考我们的 CSS 资源，以提高您的 CSS 技能。