【零基础学习web前端】CSS-伪类(:active、:hover)
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可以使光标经过目标时,会变成手型,还可以设置成图片。
|