两个问题,一、.clr这里面的样式干嘛的。二、底部导航中添加的三角形其他三个透明边框区域怎么隐藏,鼠标移上去为什么a的颜色会变

来源:2-1 导航页面切换(1)

啊西巴

2017-06-20 17:05

.nav input:checked + a:after{content:"";height:0;width:0;overflow:hidden;border:50px solid transparent;border-bottom-color:#AA213E;position:absolute;bottom:50px;left:50%;margin-left:-50px;}

.nav input:hover + a{background:#D9161A;}

.nav input:checked:hover + a{background:#AA213E;}


写回答 关注

2回答

  • moon_gloaming
    2018-03-16 15:56:37

    .clr 是清除浮动的

    border:50px solid transparent;里transparent就是设置为颜色为透明,后面再只给border-bottom-color设置颜色,就只会显示底部三角了

    加了hover 所以鼠标滑过的时候颜色会变

  • JY_YOLO
    2017-06-25 16:58:32

    .clr在哪 没看到 

    .st-container input:checked + a:after{content: "";width: 0;height: 0;overflow: hidden;

    border: 20px solid transparent;border-bottom-color: #821134;position: absolute;bottom: 100%;left: 50%;margin-left: -20px;}

    .st-container input:checked + a,

    .st-container input:checked:hover + a{background: #3f7830;}

    三个透明边框 你可以搜索下 CSS画三角形 那边说的比较详细 你重新写一遍看看 因为加了hover就是鼠标掠过的触发所以鼠标移动上去于颜色会变

css3实现网页平滑过渡效果

CSS3 打造页面之间的平滑过渡效果,带来神奇的体验

54371 学习 · 372 问题

查看课程

相似问题