综合开发

CSS实现控制元素的显示和隐藏

微信扫一扫,分享到朋友圈

CSS实现控制元素的显示和隐藏

1 使用label + input实现元素的隐藏和显示

以下代码点击‘菜单’可以实现li列表的显示和隐藏:

<styletype="text/css">*{margin:0;padding:0;
}input, ul{display:none;
}input:checked ~ ul{display:block;
}
</style>
<body>
  <labelfor="menu">菜单</label>
<div>
<inputid="menu"type="checkbox"/>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>

~选择器:

element1~element2 选择器 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1。

2 hover实现鼠标悬浮时显示其他元素,离开时隐藏这个元素

以下代码实现鼠标放到‘菜单’时显示li列表,离开时隐藏li列表:

<styletype="text/css">*{margin:0;padding:0;
}input, ul{display:none;
}#btn:hover ~ ul{display:block;
}
</style>
<body>
  <spanid="btn">菜单</span>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>

3 button + focus点击指定按钮时显示,点击其他地方时隐藏

以下代码实现点击‘菜单’时显示li列表,点击除‘菜单’以外的地方隐藏li列表:

       <styletype="text/css">*{margin:0;padding:0;
}input, ul{display:none;
}#btn:focus ~ ul{display:block;
}
</style>
<body>
  <buttonid="btn">菜单</button>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>

原文:http://dongtianee.sinaapp.com/demo8.html

CSS实现控制元素的显示和隐藏

原文地址:https://www.cnblogs.com/xjy20170907/p/12580532.html

Building SciKitLearn Random Forest Model and Tuning Parameters without writing Python Code

上一篇

fastjson < 1.2.66 正则表达式拒绝服务漏洞

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

CSS实现控制元素的显示和隐藏

长按储存图像,分享给朋友