• 技术文章 >web前端 >css教程

    鼠标划过字体时如何用css来实现字体变色?(代码实测)

    藏色散人藏色散人2018-08-09 15:22:20原创7459
    当我们在浏览网页时,鼠标划过某段文字会出现变色效果,这就是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>

    以上代码可以直接复制在本地测试。

    cb7df47ec07a88c197eadc6fa8f666f.png

    注:a后面的color:red;等于链接文字为黑色,a:hover 的 color:black;等于鼠标移动到链接文字上后为红色, a:active 的 color:blue;等于鼠标点击链接文字后为蓝色。

    那么希望本篇文章关于css鼠标经过字体变色效果如何实现的问题介绍,对大家有所帮助!

    【相关内容推荐】

    CSS中关于文本字体颜色(CSS color)的详解

    html和css中字体颜色设置的相关总结

    字体颜色背景色的设置

    CSS如何实现文字颜色渐变的实例

    以上就是鼠标划过字体时如何用css来实现字体变色?(代码实测)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css实现字体变色
    上一篇:css怎么实现字体放大特效?(首字符变化代码实测) 下一篇:什么是css?css三种样式以及文字属性的介绍
    线上培训班

    相关文章推荐

    • css调用方法是什么• uniapp开发饿了么微信小程序首页sticky粘性定位布局• css怎么去除表格边框• postcss是什么东西?为什么要用?• css中字间距怎么设置

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网