代码如下:
<div class=" clearfix insert">
<div class="pull-left button a1 act"><a style="text-decoration: none" href="gene.html">关于9521</a></div>
<div class="pull-right button a2"><a style="text-decoration: none" href="gene2.html">加入9521</a></div>
</div>
.banner .insert{
position: absolute;
width: 370px;
text-align: center;
margin:100px auto;
left: 50%;
top: 40%;
transform: translate(-50%);
}
.banner .button{
width: 47%;
height: 100%;
font-size: 20px;
display: block;
padding: 10px;
background-color:#fafafa;
}
.banner .button a{
color: #282828;
}
.banner .button.act{
background-color: #164a8b;
color: #eee;
}
.banner .act a{
color: #eee;
}
.banner .a1{
transition: all 0.2s;
}
.banner .a2{
/*color:#000;*/
transition: all 0.2s;
}
.banner .a1:hover{
background-color: #164a8b;
}
.banner .button:hover a{
color: #eee;
}
.banner .a2:hover{
background-color: #164a8b;
}
切换前:
切换后:
用:hover点击效果: