菜单可以正常操作，点击文字页面无法切换，点伪类after生成的三角可以切换是为啥？
具体情况如标题描述，菜单可以选择变色，但是点击之后scroll无法移动，只有点击三角才可以，估计是A标签哪里写的有问题，但是又找不到，请高手指点一二，谢啦
1 回答
<!-- 导航条开始 --> <div class="container"> <div class="st-container"> <input name="radio-set" type="radio" id="st-control-1" checked="checked"/> <a href="#st-panel-1">第一个链接</a> <input name="radio-set" type="radio" id="st-control-2"/> <a href="#st-panel-2">第二个链接</a> <input name="radio-set" type="radio" id="st-control-3"/> <a href="#st-panel-3">第三个链接</a> <input name="radio-set" type="radio" id="st-control-4"/> <a href="#st-panel-4">第四个链接</a> <input name="radio-set" type="radio" id="st-control-5"/> <a href="#st-panel-5">第五个链接</a> </div> </div> <!-- 导航条结束 --> <!-- 切换主体内容开始 --> <div class="st-scroll"> <section class="st-panel" id="st-panel-1"> <div class="st-desc" data-icon="H"></div> <h2>1主体文本标题</h2> <p>这里填写主要的文本里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内内容</p> </section> <section class="st-panel st-color" id="st-panel-2"> <div class="st-desc" data-icon="H"></div> <h2>2主体文本标题</h2> <p>这里填写主要的文本内容</p> </section>
====================以下是CSS=====================
html{
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
background-color: #034;
font-weight: 400;
font-size: 15px;
color:#333;
/*overflow: hidden;*/
-webkit-font-smoothing:antialiastd;
-moz-font-smoothing:antialiastd;
-ms-font-smoothing:antialiastd;
-o-font-smoothing:antialiastd;
font-smoothing:antialiastd;
}
a{
text-decoration: none;
color:#fff;
}
.clr{
width: 0;
height: 0;
overflow: hidden;
clear:both;
padding: 0;
margin: 0;
}
.st-container{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.st-container > input ,
.st-container > a{
width: 20%;
height: 34px;
line-height: 34px;
position:fixed;
bottom: 0;
cursor:pointer;
}
.st-container > input{
opacity:0;
z-index: 1000;
}
.st-container > a{
z-index: 10;
background-color: #e23a6e;
text-align: center;
text-shadow: 1px 1px 1px rgba(2,2,233,.5);
}
#st-control-1,#st-control-1 + a{
left:0%;
}
#st-control-2,#st-control-2 + a{
left:20%;
}
#st-control-3,#st-control-3 + a{
left:40%;
}
#st-control-4,#st-control-4 + a{
left:60%;
}
#st-control-5,#st-control-5 + a{
left:80%;
}
.st-container input:checked + a,.st-container input:checked:hover + a{
background-color: #821134;
}
.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:hover + a {
background-color: #ad244f;
}
/*内容区*/
.st-scroll, .st-panel{
width: 100%;
height: 100%;
background-color: #fff;
}
.st-scroll {
left: 0;
top:0;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}
.st-panel{
background-color: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll{
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-ms-transform:translateY(0%);
-o-transform:translateY(0%);
transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
-webkit-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-o-transform:translateY(-200%);
transform:translateY(-200%);
}举报
0/150
提交
取消
