a标签伪类选择器
a:link{color: #FF0000}/* 未访问的链接 */
a:visited{color: #00FF00}/* 已访问的链接 */
a:hover{color: #FF00FF}/* 鼠标移动到链接上 */
a:active{color: #0000FF}/* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪类名称对大小写不敏感。
过渡模块属性(需要结合属性变化)
单独属性:
transition-property:需要过渡的属性名
transition-duration:过渡的时间
transition-timing-function:过渡的速度模式
【linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)】
transition-delay:延迟触发过渡的时间
简写属性:
transition:property duration timing-function delay;
代码:
/*设置超链接*/
/*过渡模块的基本使用*/
.channel a {
display:inline-block;
text-decoration:none;
transition-property:background-color,font-size;
transition-duration:1s,1s;
}
/*a标签初始状态*/
.channel a:link{
color:white;
}
/*a标签被访问后状态*/
.channel a:visited{
color:grey;
}
/*a标签在鼠标悬停在上方时的状态*/
.channel a:hover{
color:red;
width:150px;
height:60px;
background-color:yellow;
float:left;
text-align:center;
line-height:60px;
border-right:5px solid white;
border-left:5px solid white;
box-sizing:border-box;
position:relative;
font-size:30px;
bottom:10px;
left: -1.5px;
}
/*a标签在鼠标点击拖动不放时的状态*/
.channel a:active{
color:greenyellow;
}