【零基础学习web前端】CSS-伪类（:active、:hover）

Amy

【零基础学习web前端】CSS-伪类（:active、:hover）

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

CSS 伪类用于向某些选择器添加特殊的效果。
我们将CSS伪类添加到选择器，并通过：分隔。

[CSS] 纯文本查看 复制代码

selector:pseudo-class { 
   property: value; 
}

常见的伪类有：
:active
效果为用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上。

[CSS] 纯文本查看 复制代码

.box{
    width: 200px;
    height: 200px;
    background: #999;
}
.box:active{
    background: red;
}

在css里设置了基本样式，加入：active伪类后的样式。
未点击时：            

点击时的效果：

:hover
hover是当鼠标经过时，对象改变样式。
比如上例中，还可以设置

[CSS] 纯文本查看 复制代码

.box:hover{
    border: 2px solid blue;
}

当鼠标经过方块时，方块显示为

还可以给类box添加属性

[CSS] 纯文本查看 复制代码

cursor: pointer;
cursor: url("images/2.png")

cursor可以使光标经过目标时，会变成手型，还可以设置成图片。

竹林风

伪类这个东西，我一直都没有想明白。看了楼主的文章，学习了，顶一下

liu

楼主加油，我们都看好你哦。

站长苏飞

我只是路过打酱油的。