鼠标划过字体时如何用css来实现字体变色?(代码实测)
程序员文章站
2022-03-18 13:48:46
...
当我们在浏览网页时,鼠标划过某段文字会出现变色效果,这就是css字体变色,一方面是为了主动吸引人用户目光去点击,另一方面是为了防止用户点击错其他文字段落。其实这种css鼠标经过字体变色的效果是非常容易实现的。只要你略懂css知识都可以实现操作。
主要知识点就是鼠标悬停在CSS中写为HOVER,鼠标触发在CSS中写为ACTIVE。
css鼠标经过字体变色效果实现的具体代码示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css字体变色测试</title> </head> <style> a { color:black} a:hover { color:red } a:active { color:blue} </style> <body> <a> 你过来指我试试!!! </a> </body> </html>
以上代码可以直接复制在本地测试。
注:a后面的color:red;等于链接文字为黑色,a:hover 的 color:black;等于鼠标移动到链接文字上后为红色, a:active 的 color:blue;等于鼠标点击链接文字后为蓝色。
那么希望本篇文章关于css鼠标经过字体变色效果如何实现的问题介绍,对大家有所帮助!
【相关内容推荐】
以上就是鼠标划过字体时如何用css来实现字体变色?(代码实测)的详细内容,更多请关注其它相关文章!
上一篇: Eclipse上导出码云上项目的实例详解
下一篇: 在vue项目中使用mock.js