1、导航栏样式
效果图
鼠标移动上到标签上,会呈现如下效果:
制作过程中遇到的问题:a、文字外层 " L ",显示位置不对。可以设置两个h3 位置为绝对位置。b、鼠标移动上去,链接没反应。可能是下层、上层组件遮盖住了。可以设置 z-index: 1;
代码
h3{
text-align: center;
width: 8.6rem;
height: 2.4rem;
}
h3:before{
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 12px;
height: 12px;
border: 3px solid #c7254e;
border-width: 0 0 3px 3px;
transition: .5s;
opacity: 0; /*设置透明度*/
}
h3:hover:before{
bottom: -10px;
left: -10px;
opacity: 1;
}
h3:hover:after {
top: -10px;
right: -10px;
opacity: 1;
}
h3:after{
content: '';
position: absolute;
top: 0px;
right: 0px;
width: 12px;
height: 12px;
border: 3px solid #c7254e;
border-width:3px 3px 0 0 ;
transition: .5s;
opacity: 0;
}
h3:hover {
background: #c7254e;
color: #fff;
}
#myCourse{ /*设置两个h3 标签的位置*/
z-index: 1;
position: absolute;
top: 0;
left: 20%;
cursor:pointer;
}
#todayLesson{
position: absolute;
top: 0;
left: 0;
cursor:pointer;
}