如何用HTML5实现鼠标经过时改变图片颜色?

我们在浏览网页时，当鼠标划过某一物体，就会发现，图片和文字与原图变了样，这是为什么？那是因为我们为CSS样式加了伪类：如（当鼠标经过时，背景颜色改为红色，字体变为白色等，常见伪类主要有：
link:用在为访问的连接上。
visited:用在已经访问过的连接上。
hover:用于鼠标光标置于其上的连接。
active:用于获得焦点(比如，被点击)的连接
下面就让我们一起动手制作一个光标经过点时图片和文字改变的伪类吧！

操作方法

  • 01

    先在<body>里面插入五个<div>标签，类名class为nav,在<div>标签里输入自已想要的内容：

  • 02

    运行程序，结果如图

  • 03

    采用内部样式链入CSS，所有样式的内容居中，代码如图

  • 04

    运行程序，结果如图

  • 05

    为类.nav设置边框、背景、内边距、倾斜度（-20），代码如图

  • 06

    运行程序，结果如图

  • 07

    校对<div>标签里面的文字，字体颜色为黄色如图

  • 08

    运行程序，结果如图

  • 09

    为类nav设置伪类（hover）:鼠标经过是背景颜色变为蓝色，字体变为白色，代码如图

  • 10

    运行程序，结果如图

赞 (0)

相关推荐

  • 如何用最简单的方法来改变图片大小

    现在很多图片从网络上下载下来是不符合需求,所以我们现在来讲讲如何用最简单的方法来改变图片大小. 操作方法 01 首先,鼠标右键单击图片,选择打开方式为画图. 02 然后,再点击重新调整大小. 03 然 ...

  • PPT怎么在单击文字时改变原来颜色?

    PPT是有很强的直观效果,在进行文字编排的时候,有很多时候,为了突出强调某些文字,让文字在自己需要的时候改变一下颜色,醒目一点,吸引人,如何设置呢?下面小编就为大家详细介绍PPT怎么在单击文字时改变原 ...

  • PPT中如何快速灵活改变图片颜色？

    PPT 2013是一款广泛应用在各行各业的展示文稿软件.制作PPT时在PPT中插入图片可以为我们的展示加分不少,但是有时我们找到的图片和PPT的整体格调不搭.这时我们可以利用PPT对图片进行简单的颜色 ...

  • PPT教你快速灵活改变图片颜色

    快速灵活改变图片颜色 利用powerpoint制作演示文稿课件,插入漂亮的剪贴画会为课件增色不少.可并不是所有的剪贴画都符合我们的要求,剪贴画的颜色搭配时常不合理.这时我们可以: 右键点击该剪贴画选择 ...

  • 怎么通过PS改变图片颜色

    怎么通过PS改变图片颜色

    PS是现在十分常用的一款图片编辑软件,有些新用户不知道怎么通过PS改变图片颜色,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的PS软件,接着根据下图所示,导入需要编 ...

  • PPT中如何让文字单击时改变原来颜色

    PPT是有很强的直观效果,在进行文字编排的时候,有很多时候,为了突出强调某些文字,让文字在自己需要的时候改变一下颜色,醒目一点,吸引人,如何设置呢? 操作方法 01 1.打开PPT软件,在文本框中先输 ...

  • ps怎么改变图片颜色

    今天小编来和大家分享一下如何使用PS软件来改变图片的颜色,要改变颜色无非是用到了色阶.色相饱和度.曲线.色彩平衡等. 操作方法 01 首先,我们打PS软件,将准备好的图片拖入到软件中. 02 我们点击 ...

  • 如何用css使鼠标经过时图片变大

    如何使鼠标经过图片时图片变大呢,可以通过css进行简单的设置就可以了. 操作方法 01 首先把内容写好了,代码为 <div id="bianda"> <img s ...

  • Excel中如何设置鼠标经过时显示图片

    要实现Excel表格中鼠标指向单元格就出现相关图片的互动效果，只要通过Excel2007的添加图片批注功能就可以轻松做到。 下面，我们以制作产品列表为例，展示具体的添加图片方法。 鼠标指向单元格，自动 ...