多语言展示
当前在线:1559今日阅读:60今日分享:41

css设置鼠标滑过字体变大

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

新建一个html文件。如图:

2

在html代码文件上找到,然后在里创建一个标签,案例中使用的是

,最后给这个标签添加一个类。如图代码:
大家好啊!请把鼠标放上面

3

后面添加一个<style>,然后在<style>里使用hover设置鼠标滑过时字体变大。如图代码:</p></div><div class="listcon"><span>4</span><p>保存html代码文件,使用浏览器打开,把鼠标放到文字上即可看到效果。如图</p></div><div class="listcon"><span>5</span><p>所有代码。可以直接复制以下所有代码,粘贴到新建的html文件上,保存后运行即可看到效果。代码、<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>css设置鼠标滑过字体变大

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