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

前端之家收集整理的这篇文章主要介绍了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">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仍然没有隐藏@H_502_13@任何人都可以帮助我.

谢谢之前:)

解决方法

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

jsFiddle

HTML

<div id="show">
    <a href="#show" id="open" class="btn btn-default btn-sm">Open</a>
    <div id="content">
        some text...
        <a href="#hide" id="close" class="btn btn-default btn-sm">Close</a>
    </div>
</div>

CSS

#content {
    display: none;
}
#show:target #content {
    display: inline-block;
}
#show:target #open {
    display: none;
}
原文链接:https://www.f2er.com/html/232137.html

猜你在找的HTML相关文章