我有一個問題,一切工作正常,但顯示:沒有複選框不是,複選框仍然存在我試圖通過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的,只能通過屬性附加傷害,並滑動輸入/輸出停止工作 –
你要隱藏的只是複選框,這就是它或還有其他一些條件? –