前端页面开发过程中，有时候会制作一些动态效果加深用户的体验，让我们一起来看一下css如何制作鼠标滑过字体变大吧。思路：在需要实现鼠标滑过字体变大的功能的样式类，添加:hover即可。代码：.font-big:hover{font-size: 2em;}方法/步骤1/5分步阅读

新建一个html文件。如图：

2/5

在html代码文件上找到body,然后在body里创建一个标签，案例中使用的是div,最后给这个标签添加一个类。如图

代码：

div class=font-big

大家好啊！请把鼠标放上面

/div

3/5

在title后面添加一个style,然后在style里使用hover设置鼠标滑过时字体变大。如图

代码：

4/5

保存html代码文件，使用浏览器打开，把鼠标放到文字上即可看到效果。如图

5/5

所有代码。可以直接复制以下所有代码，粘贴到新建的html文件上，保存后运行即可看到效果。

代码、

!DOCTYPE html

html

head

meta charset=UTF-8

titlecss设置鼠标滑过字体变大/title

style type=text/css

.font-big:hover{

font-size: 2em;

}

/style

/head

body

div class=font-big

大家好啊！请把鼠标放上面

/div

/body

/html

CSSCSS鼠标滑过CSS字体变大