使用 CSS 变量实现 Hover 时动态改变字体大小-html教程-PHP中文网

使用 CSS 变量实现 Hover 时动态改变字体大小

花韻仙語

发布： 2025-09-28 14:29:11

原创

279人浏览过

使用 css 变量实现 hover 时动态改变字体大小

本文介绍了如何利用 CSS 变量在鼠标悬停时动态调整字体大小。通过定义全局 CSS 变量，并在 :hover 伪类中修改变量值，可以实现灵活的字体大小变化效果，同时兼顾不同屏幕尺寸的响应式设计。本文提供详细代码示例，帮助开发者理解和应用这种方法。

在现代 Web 开发中，CSS 变量（也称为自定义属性）提供了一种强大的方式来管理和复用样式值。我们可以利用 CSS 变量来实现许多动态效果，例如在鼠标悬停时改变字体大小。以下将详细介绍如何实现这一功能。

1. 定义 CSS 变量

首先，我们需要在 :root 伪类中定义一个 CSS 变量来存储字体大小。 :root 选择器匹配文档的根元素，通常是 <html> 元素，这意味着定义的变量具有全局作用域。

立即学习“前端免费学习笔记（深入）”；

:root {
  --font-size: 1.25rem;
}

登录后复制

在这个例子中，我们定义了一个名为 --font-size 的变量，并将其初始值设置为 1.25rem。

2. 应用 CSS 变量

接下来，我们将这个变量应用到需要改变字体大小的元素上。使用 var() 函数来引用 CSS 变量的值。

h1 {
  font-size: var(--font-size);
}

登录后复制

这段代码会将 <h1> 元素的字体大小设置为 --font-size 变量的值，即 1.25rem。

3. 实现 Hover 效果

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

现在，我们可以使用 :hover 伪类来修改鼠标悬停时的字体大小。我们将使用 calc() 函数来计算新的字体大小，在原有字体大小的基础上乘以一个比例因子。

h1:hover {
  font-size: calc(var(--font-size) * 1.15);
}

登录后复制

当鼠标悬停在 <h1> 元素上时，字体大小将变为当前 --font-size 值的 1.15 倍。

4. 响应式设计

为了适应不同屏幕尺寸，我们可以在媒体查询中使用不同的 CSS 变量值。

@media only screen and (max-width: 595px) {
  :root {
    --font-size: 1rem;
  }
}

登录后复制

在这个例子中，当屏幕宽度小于或等于 595 像素时，--font-size 变量的值将被设置为 1rem。这确保了字体大小在较小的屏幕上不会过大。

完整示例代码

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --font-size: 1.25rem;
}

@media only screen and (max-width: 595px) {
  :root {
    --font-size: 1rem;
  }
}

h1 {
  font-size: var(--font-size);
}

h1:hover {
  font-size: calc(var(--font-size) * 1.15);
}
</style>
</head>
<body>

<h1>Just a Test</h1>

</body>
</html>

登录后复制

注意事项