html – 点击隐藏此(按钮链接)纯css

概述我的功能是使用纯css隐藏和显示div但是当我点击打开时,按钮仍然不会消失. <a href="#show" id="open" class="btn btn-default btn-sm">Open</a><div id="show"> some text... <a href="#hide" id="close" class="btn btn-default btn-sm">Clos 我的功能是使用纯CSS隐藏和显示div但是当我点击打开时,按钮仍然不会消失.

<a href="#show" ID="open" >Open</a><div ID="show">  some text...  <a href="#hIDe" ID="close" >Close</a></div>

和CSS看起来像：

<style>    #show {display: none; }    #show:target { display: inline-block; }    #hIDe:target ~ #show { display: none; }<style>

当我添加这个：

#show:target ~ #open { display: none; }

按钮#open仍然没有隐藏
任何人都可以帮助我.

谢谢之前:)

解决方法 您可以通过将您的Open链接放在#show div中来解决它

jsFiddle

HTML

<div ID="show">    <a href="#show" ID="open" >Open</a>    <div ID="content">        some text...        <a href="#hIDe" ID="close" >Close</a>    </div></div>

CSS

#content {    display: none;}#show:target #content {    display: inline-block;}#show:target #open {    display: none;}

总结

以上是内存溢出为你收集整理的html – 点击隐藏此(按钮链接)纯css全部内容，希望文章能够帮你解决html – 点击隐藏此(按钮链接)纯css所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。