显示：没有不适用于复选框css
[英]display: none does not work with checkbox css
问题描述
我有一个问题，一切都很好，但显示：复选框不存在，复选框仍然存在我试图通过html atribute对其进行样式设置（我知道这不是一件好事，但我当时准备好使用任何解决方案），它可以工作，但是滑入/滑出操作却停止了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> * {padding:0; margin:0;} body { font-family:sans-serif; } a { text-decoration: none; color:#00a5cc; } li { list-style-type:none; } header { height : 50px; margin:auto; width : 100%; border-bottom:1px solid #EEE; } #brand { float:left; line-height:50px; color:#E5DAC0; font-size:25px; font-weight:bolder; } nav { width:100%; text-align:center; } nav a { display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC; } nav a:hover { background:#E5DAC0; color :#FFF; } nav li:last-child a { border-bottom:none; } /************************************************************** **************************************************************/ .menu{ width: 240px; height: 100%; position: absolute; background: #a9a1f3; left: -240px; trensition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .menu-icon{ padding: 10px 20px; background: #000000; color: #aa25e9; cursor:pointer; float:right; margin-top:4px; border-radius:5px; } } #menuToggle{ display: none; } #menuToggle:checked ~ .menu { position:absolute; left:0px; } </style> <body> <input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label> <header> <div id="brand"> slide in out nav</div> </header> <nav class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORK</a></li> <li><a href="#">INSPIRATION</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2016-09-29 03:12:33
您在.menu-icon CSS中有一个错误，它有一个额外的} ，这就是为什么它不起作用的原因。
只需删除多余的}就可以按预期工作。
此处的实时示例： https ： //jsfiddle.net/ay84zjjw/
希望这可以帮助。
解决方案2
0 2016-09-29 03:15:26
在您的代码中只是一个小错误，而更多}。
.menu-icon{
padding: 10px 20px;
background: #000000;
color: #aa25e9;
cursor:pointer;
float:right;
margin-top:4px;
border-radius:5px; **}**
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> * {padding:0; margin:0;} body { font-family:sans-serif; } a { text-decoration: none; color:#00a5cc; } li { list-style-type:none; } header { height : 50px; margin:auto; width : 100%; border-bottom:1px solid #EEE; } #brand { float:left; line-height:50px; color:#E5DAC0; font-size:25px; font-weight:bolder; } nav { width:100%; text-align:center; } nav a { display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC; } nav a:hover { background:#E5DAC0; color :#FFF; } nav li:last-child a { border-bottom:none; } /************************************************************** **************************************************************/ .menu{ width: 240px; height: 100%; position: absolute; background: #a9a1f3; left: -240px; trensition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; } .menu-icon{ padding: 10px 20px; background: #000000; color: #aa25e9; cursor:pointer; float:right; margin-top:4px; border-radius:5px; } #menuToggle{ display: none; } #menuToggle:checked ~ .menu { position:absolute; left:0px; } </style> <body> <input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label> <header> <div id="brand"> slide in out nav</div> </header> <nav class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORK</a></li> <li><a href="#">INSPIRATION</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </body> </html>
在CSS中不显示任何内容，淡出不起作用或隐藏div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.