首页 > 软件开发 > CSS >

css设置鼠标滑过字体变色

来源:互联网 2023-03-16 19:17:43 版权归原作者所有,如有侵权,请联系我们

网页上鼠标滑过字体变色是一种常见的效果,可以通过自己颜色的改变给用户一个很好的体验效果。如何制作鼠标滑过字体变色,可以通过css提供了鼠标滑过:hover选择器对样式进行修改。EMz办公区 - 实用经验教程分享!

语法:EMz办公区 - 实用经验教程分享!

a:hover{EMz办公区 - 实用经验教程分享!

color: red;EMz办公区 - 实用经验教程分享!

}EMz办公区 - 实用经验教程分享!

css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

方法/步骤

  • 1

    打开html开发工具,创建一个html文件,如图:EMz办公区 - 实用经验教程分享!

    css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

  • 2

    在html页面找到body>标签,在body>标签里面输入内容,然后用a>标签把内容覆盖。如图:EMz办公区 - 实用经验教程分享!

    css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

  • 2相关内容未经许可获取自百度经验
  • 3

    修改a>标签的内容设置颜色为蓝色,如图:EMz办公区 - 实用经验教程分享!

    css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

  • 4

    设置鼠标滑过a>标签,字体变为红色的样式:a:hover{color:red} 。如图:EMz办公区 - 实用经验教程分享!

    css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

  • 5

    保存好html文件,使用浏览器打开,首先看到的是蓝色字体,把鼠标放到文字上就会发现蓝色字体变为红色字体。EMz办公区 - 实用经验教程分享!

    css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

    css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

  • 6

    实现的所有代码,直接把代码复制到html文件即可看到效果:EMz办公区 - 实用经验教程分享!

    !DOCTYPE html>EMz办公区 - 实用经验教程分享!

    html>EMz办公区 - 实用经验教程分享!

    head>EMz办公区 - 实用经验教程分享!

    meta charset="UTF-8">EMz办公区 - 实用经验教程分享!

    title>鼠标滑过字体变色/title>EMz办公区 - 实用经验教程分享!

    style type="text/css">EMz办公区 - 实用经验教程分享!

    a{EMz办公区 - 实用经验教程分享!

    color:blue;EMz办公区 - 实用经验教程分享!

    }EMz办公区 - 实用经验教程分享!

    a:hover{EMz办公区 - 实用经验教程分享!

    color: red;EMz办公区 - 实用经验教程分享!

    }EMz办公区 - 实用经验教程分享!

    /style>EMz办公区 - 实用经验教程分享!

    /head>EMz办公区 - 实用经验教程分享!

    body>EMz办公区 - 实用经验教程分享!

    a href="">把鼠标放到我身上/a>EMz办公区 - 实用经验教程分享!

    /body>EMz办公区 - 实用经验教程分享!

    /html>EMz办公区 - 实用经验教程分享!

    css设置鼠标滑过字体变色EMz办公区 - 实用经验教程分享!

  • 注意事项

    • 鼠标滑过样式改边一定要用到:hover选择器

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!EMz办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号