仅使用CSS隐藏一个div

Question

仅使用CSS隐藏一个div

htmlcss

6

有没有一种纯CSS的方法来隐藏一个div，只有当你点击链接时才会隐藏它呢？我正在制作一个弹出窗口，需要在没有JS的情况下关闭。我尝试了各种方法，但当按钮在需要隐藏的div内部时，它们都无法正常工作。

- Verpz

2

你能否请发一下你尝试过的方法... - Nofi

有没有办法用noscript来实现这个？ - Verpz

不好意思，我的 GitHub 更新并不频繁，所以你需要再找其他人帮忙了。@Coding... - Verpz

3个回答

0

下面的示例在复选框被选中时隐藏 div。

它使用了 #closebutton ~ #targetdiv {... 选择器，该选择器只能按此顺序处理其元素。因此，复选框位于布局的主 div 内部，但在代码中却在其前面。

.main {
  border-radius: 5px;
  padding: 30px;
  margin-bottom: 5px;
}

#A {
  background: gold;
}

#B {
  background: skyblue; 
}

#C {
  background: yellowgreen; 
}

.close {
  float: right;
  margin-top: 30px;
  margin-right: 75px;
  height: 20px;
  width: 20px;
}

.close:checked {
  display: none;
}

.close:checked ~ #A, .close:checked ~ #B, .close:checked ~ #C {
  display: none;
}

body {
  overflow-y: scroll;  
}

<div id=groupA><input class="close" type="checkbox">
<div id=A class=main>info A</div></div>

<div id=groupB><input class="close" type="checkbox">
<div id=B class=main>info B</div></div>

<div id=groupC><input class="close" type="checkbox">
<div id=C class=main>info C</div></div>

- L777

0

<html>
<head>
    <style> 
        #hide{
            z-index: 10000;
            position: relative;
            top: -54px;
            padding: ;
            width: 9%;
            opacity: 0;
            height: 22px;
        }
        #hide:checked~h2{
            display: block;
        }
        h2{
            display: none;
        }
    </style>
    <title></title>
</head>
<body>
    <h1>Click me</h1>
    <input type="checkbox" id="hide" />
    <h2>I'll appear when you click h1 !!!</h2>
</body>
</html>

- Hassy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick · Accepted Answer

当按钮位于需要隐藏的div内部时，简短回答：不行。

~~然而，当按钮位于div外部时，你是可以实现这个效果的。~~ ^{感谢Joseph Marikle}

#hide {
  display: none;
}
label {
  cursor: pointer;
  text-decoration: underline;
}
#hide:checked ~ #randomDiv {
  display: none;
}

<input type="checkbox" id="hide" />


<div id="randomDiv">
  This is a div
  <label for="hide">Hide div</label>
</div>