点击隐藏此（按钮链接）纯CSS [英] on click hide this (button link) pure css

问题描述

我的功能是使用纯CSS隐藏和显示div ，但是当我点击打开，按钮仍然不会消失。

my function is hide and show div with pure css but when i click open, the button still not disappear.

<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

感谢：）

推荐答案

您可以将Open链接置于 #show div

You could solve it by putting your Open link inside the #show div

jsFiddle

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;
}

这篇关于点击隐藏此（按钮链接）纯CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！