css设置鼠标滑过字体变色

网页上鼠标滑过字体变色是一种常见的效果,可以通过自己颜色的改变给用户一个很好的体验效果。如何制作鼠标滑过字体变色,可以通过css提供了鼠标滑过:hover选择器对样式进行修改。
语法:
a:hover{
color: red;
}

操作方法

  • 01

    打开html开发工具,创建一个html文件,如图:

  • 02

    在html页面找到<body>标签,在<body>标签里面输入内容,然后用<a>标签把内容覆盖。如图:

  • 03

    修改<a>标签的内容设置颜色为蓝色,如图:

  • 04

    设置鼠标滑过<a>标签,字体变为红色的样式:a:hover{color:red} 。如图:

  • 05

    保存好html文件,使用浏览器打开,首先看到的是蓝色字体,把鼠标放到文字上就会发现蓝色字体变为红色字体。

  • 06

    实现的所有代码,直接把代码复制到html文件即可看到效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标滑过字体变色</title> <style type="text/css"> a{ color:blue; } a:hover{ color: red; } </style> </head> <body> <a href="">把鼠标放到我身上</a> </body> </html>

(0)

相关推荐

  • css设置鼠标滑过背景变色;鼠标滑过背景变色

    在很多网页中我们都看到当鼠标滑过一个内容时,这个内容的背景会改变颜色.设置鼠标滑过背景变色只需用到 :hover 即可设置成功. 语法:   div:hover{background-color: r ...

  • css鼠标滑过字体变大

    打开html开发工具,新建一个html代码页面,然后穿件一个<div>标签并给这个标签添加一些文本内容. 操作方法 01 打开html开发工具,新建一个html代码页面,然后创建一个带有文 ...

  • css如何设置鼠标指针;css如何设置鼠标手指

    在前端页面开发中,为了提高用户体验,方便用户操作,常常对一些点击可以打开新页面的或打开新功能的文字加上一个鼠标指针. css如何设置鼠标指针呢?只需要对需要设置鼠标指针的文字加上一个 cursor: ...

  • 网页制作鼠标触发字体变色效果

    使用行为制作触发字体变色 操作方法 01 打开Dreamweaver,找到中间新建并点击html. 02 首先我在设计页面随便输入一些字母, 03 然后选取文字,在下面工具栏那找到链接,在文本框里输入 ...

  • axure中如何设置鼠标按下时矩形变色效果制作

    axure中如何设置鼠标按下时矩形变色效果制作 操作方法 01 在元件库中选择一个框建立在右侧工作区中 02 然后点击这个框,右键选择里面的交互样式属性 03 在打开的样式属性中,有一个鼠标按下的选项 ...

  • css设置字体大小

    前端开发中,为了突出一些内容常常对一些内容进行字体大小的设置.css提供了一个设置字体大小的属性: font-size. 语法: font-size:20px 操作方法 01 打开html开发软件,新 ...

  • 如何设置鼠标移到屏幕角落时Mac自动锁机方便离开

    用户们有时会经常间接性的使用MAC,如何才能让MAC在自己离开的时候,马上就能锁机呢?有些用户选择在不用MAC的时候,将屏幕掩上以达到锁机的目的。其实让MAC即时锁机是很容易的,现在小编就教大家一个简 ...

  • 怎么在WPS文字中设置格式一样的字体

    WPS文字中设置格式一样的字体的步骤: 1打开wps文字加入要设置跟那五个一格式一样的字或段落我们可以利用格式刷工具 2选择该格式不用全选只需要选中其中任意一个字符即可 3在菜单栏找到格式刷点击一下 ...

  • word怎么设置上标下标以及字体间的行距?

    上标下标有时还是很重要的,教你如何在WORD中设置上标下标以及字体间的行距,不会的朋友快快来看看吧! 上标下标.行距更改方法 1.为了方便查看,在word中随便写了一段话.我们将段落中“这里那边”四个 ...