CSS实现控制元素的显示和隐藏
2021-03-31 19:25
标签：使用 code round put 实现 over 点击其他 inpu 直接 1 使用label + input实现元素的隐藏和显示 以下代码点击‘菜单’可以实现li列表的显示和隐藏： ~选择器： element1~element2 选择器 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。 2 hover实现鼠标悬浮时显示其他元素，离开时隐藏这个元素 以下代码实现鼠标放到‘菜单’时显示li列表，离开时隐藏li列表： 3 button + focus点击指定按钮时显示，点击其他地方时隐藏 以下代码实现点击‘菜单’时显示li列表，点击除‘菜单’以外的地方隐藏li列表： 原文：http://dongtianee.sinaapp.com/demo8.html CSS实现控制元素的显示和隐藏 标签：使用 code round put 实现 over 点击其他 inpu 直接 原文地址：https://www.cnblogs.com/xjy20170907/p/12580532.html style type="text/css">
*{
margin: 0;
padding: 0;
}
input, ul{
display: none;
}
input:checked ~ ul {
display: block;
}
style>
body>
label for="menu">菜单label>
div>
input id="menu" type="checkbox"/>
ul>
li>1li>
li>1li>
li>1li>
ul>
div>
body>
style type="text/css">
*{
margin: 0;
padding: 0;
}
input, ul{
display: none;
}
#btn:hover ~ ul {
display: block;
}
style>
body>
id="btn">菜单>
ul>
li>1li>
li>1li>
li>1li>
ul>
body>
style type="text/css">
*{
margin: 0;
padding: 0;
}
input, ul{
display: none;
}
#btn:focus ~ ul {
display: block;
}
style>
body>
button id="btn">菜单button>
ul>
li>1li>
li>1li>
li>1li>
ul>
body>
上一篇：php基础