原理: 利用 a伪类选择器,focus。(获得焦点设置样式,失去焦点恢复样式)
注意: active 和 focus的区别,active是点击 a标签时(从鼠标按下开始 到鼠标抬起结束。)
focus是获得焦点,与失去焦点时触发相应的样式
示例demo:
<
style>
div {
width:
100
px;
height:
50
px;
border:
1
px
solid
#ccc;
text-align:
center;
line-height:
50
px;
font-size:
14
px;
padding:
10
px;
box-sizing:
border-box;
}
a {
display:
block;
text-decoration:
none;
background:
pink;
width:
100
px;
height:
50
px;
}
a
:focus
h4{
color:
green;
background:
yellow;
}
a
h4{
color:
hotpink;
}
</
style>
<
div>
<
a
href=
"#">
<
h4>你好</
h4>
</
a>
<
a
href=
"#">
<
h4>你好</
h4>
</
a>
<
a
href=
"#">
<
h4>你好</
h4>
</
a>
<
a
href=
"#">
<
h4>你好</
h4>
</
a>
<
a
href=
"#">
<
h4>你好</
h4>
</
a>
</
div>