问答详情
源自：1-3 使用radio制作导航（html结构搭建）

为什么设置了单选按钮透明度，怎么没反应

*{

margin: 0;

padding: 0;

}

body{

font-family: Georgia,serif;

background: #ddd;

font-weight: 400;

font-size: 15px;

color: #333;

-webkit-font-smoothing:antialiased;


}

a{

text-decoration: none;

color:#555;

}

<!-- 链接样式-->

.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;

font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;

}

.st-container > input,

.st-container > a{

width: 20%;

height: :34px;

line-height: 34px;

position: fixed;

bottom:0;



}

.st-container > input{

<!--- display: :none;position: absolute;left :-99999px;visibility: hidden;opacity: 0

都可以把元素影藏掉，

display: :none;影藏不占位，不在这个地方。position: absolute;在这个地方。left :-99999px;不存在--->

opacity: 0.8 ;

z-index：1000;


}

.st-container > a{

z-index: 10;

font-weight: 700;

font-size: 16px;

background: #e23a6e;

text-align: center;

color: #fff;

box-shadow: 1px 1px 1px rgba(151,24,64,0.2);

}

#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 {

background:#821134; 


}

http://img.mukewang.com/596c8fb00001e68d13650597.jpg

提问者：cym01494 2017-07-17 18:21

个回答

  • cym01494
    2017-07-20 19:43:02

    <!doctype html>

    <html>

    <head>

    <title>CSS实现的页面平滑过渡</title>

    <meta charset="utf-8" >

    <!--最新渲染模式-->


    <meta http-equiv="X-UA-Compatible" content="IE-edge, chrome=1">

    <!--不会产生滚动条，窗体布局会自动缩放-->

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link href="http:fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css">

    <link type="text/css" rel="stylesheet" href="css/normalize.css">

    <link type="text/css" rel="stylesheet" href="css/style.css">

    </head>

    <body>

         <div>

            <div>

            <!--nav begin-->

            <input type="radio" name="radio-set" checked="checked" id="st-control-1">

            <a href="#st-panel-1">Serendipity </a>

            <input type="radio" name="radio-set"  id="st-control-2">

            <a href="#st-panel-2">Happiness </a>

            <input type="radio" name="radio-set"  id="st-control-3">

            <a href="#st-panel-3">Tranquillity </a>

            <input type="radio" name="radio-set"  id="st-control-4">

            <a href="#st-panel-4">Postitivity </a>

             <input type="radio" name="radio-set"  id="st-control-5">


            <a href="#st-panel-5">Passion </a>

            <!--nav end  -->

            </div>

    </div>

    </body>

    <html>


    0
  • fengyunzhu
    2017-07-20 19:40:05

    一会帮你看一下，你把html的代码也贴一下吧

    0
  • cym01494
    2017-07-20 16:26:37

    点击和划过都没反应

    0
  • fengyunzhu
    2017-07-19 14:43:37

    是点击没反应，还是划过没反应

    0