如何用HTML5实现鼠标经过时改变图片颜色?
我们在浏览网页时，当鼠标划过某一物体，就会发现，图片和文字与原图变了样，这是为什么？那是因为我们为CSS样式加了伪类：如（当鼠标经过时，背景颜色改为红色，字体变为白色等，常见伪类主要有：<br/>link:用在为访问的连接上。<br/>visited:用在已经访问过的连接上。<br/>hover:用于鼠标光标置于其上的连接。<br/>active:用于获得焦点(比如，被点击)的连接<br/>下面就让我们一起动手制作一个光标经过点时图片和文字改变的伪类吧！
操作方法
-
01
先在<body>里面插入五个<div>标签，类名class为nav,在<div>标签里输入自已想要的内容：
-
02
运行程序，结果如图
-
03
采用内部样式链入CSS，所有样式的内容居中，代码如图
-
04
运行程序，结果如图
-
05
为类.nav设置边框、背景、内边距、倾斜度（-20），代码如图
-
06
运行程序，结果如图
-
07
校对<div>标签里面的文字，字体颜色为黄色如图
-
08
运行程序，结果如图
-
09
为类nav设置伪类（hover）:鼠标经过是背景颜色变为蓝色，字体变为白色，代码如图
-
10
运行程序，结果如图
- End
- 发表于 2017-10-24 00:00
- 阅读 ( 1819 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章