我有一个问题,一切工作正常,但显示:没有复选框不是,复选框仍然存在我试图通过html atribute来设计它(我知道这是不是一件好事,但我已经准备好了任何解决方案),它的工作,但滑入/退出停止工作....我该怎么办?display:none does not work with css
<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <title>Document</title>
</head>
<style type="text/css">
\t
\t
\t * {padding:0; margin:0;}
body { font-family:sans-serif; }
a { text-decoration: none;
\t color:#00a5cc; }
li { list-style-type:none; }
header { height : 50px;
\t margin:auto;
\t width : 100%;
\t border-bottom:1px solid #EEE; }
\t #brand { float:left;
\t \t line-height:50px;
\t \t color:#E5DAC0;
\t \t font-size:25px;
\t \t font-weight:bolder; }
\t nav { width:100%; text-align:center; }
\t nav a { display:block; padding: 15px 0;
\t border-bottom: 1px solid #C3AA6E; color:#F0EADC; }
\t nav a:hover { background:#E5DAC0;
\t \t color :#FFF; }
\t nav li:last-child a { border-bottom:none; }
\t /**************************************************************
\t **************************************************************/
\t .menu{
\t \t width: 240px;
\t \t height: 100%;
\t \t position: absolute;
\t \t background: #a9a1f3;
\t \t left: -240px;
\t \t trensition: all .3s ease-in-out;
\t \t -webkit-transition: all .3s ease-in-out;
\t \t -moz-transition: all .3s ease-in-out;
\t \t -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
\t }
.menu-icon{
\t padding: 10px 20px;
\t background: #000000;
\t color: #aa25e9;
\t cursor:pointer;
\t float:right;
\t margin-top:4px;
\t border-radius:5px; }
}
#menuToggle{
\t display: none;
}
#menuToggle:checked ~ .menu { position:absolute; left:0px; }
</style>
<body>
<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">☰</label>
\t <header>
\t \t <div id="brand"> slide in out nav</div>
\t </header>
\t <nav class="menu">
\t \t <ul>
\t \t \t <li><a href="#">HOME</a></li>
\t \t <li><a href="#">ABOUT</a></li>
\t \t <li><a href="#">WORK</a></li>
\t \t <li><a href="#">INSPIRATION</a></li>
\t \t <li><a href="#">BLOG</a></li>
\t \t <li><a href="#">CONTACT</a></li>
\t \t </ul>
\t </nav>
</body>
</html>
我试过不透明度:0和visibility:hidden的,只能通过属性附加伤害,并滑动输入/输出停止工作 –
你要隐藏的只是复选框,这就是它或还有其他一些条件? –