如何让 div 在点击时消失？

Question

我整天都在努力寻找一个简单的纯css / html代码，只是为了在单击按钮时使div消失。我更喜欢 CSS，但如果不可能，我会改用 JS 解决方案。

很多关于溢出的解决方案，但大多数使用 js。请查看下面的代码并在下面添加示例或建议。感谢您的帮助，Stewy

body {
    background-color: #6B6B6B;
    font-family: Arial;
    color: grey;
    font-size: 12px;
    margin: 0px;
}
    /*............... bgcover ...............*/

    .bgcover {
    position: fixed;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, .4);
}
    .call {
    position: fixed;
    top: 100px;
    left: 100px;
}
    /*........ crossfade on buttons ........*/

    .hover,.nohover{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;
}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}

<div class="bgcover" align="center">
<p>Button turns off this bg cover div.</p>
</div>

<div class="call">
<a href="bgcoveroff.htm">
<img src="http://wizzfree.com/pix/call2.png" width="100" class="nohover">
<img src="http://wizzfree.com/pix/call.png" width="100" class="hover"></a>
</div>

Answer 1

你必须在标签中传递内联 JS。不仅可以隐藏元素。 onclick 属性应该需要触发。 喜欢这个<a href="#" id="btn" onclick="this.focus();return false">Click</a> 嗨 Stewy，请检查此代码。就是内联js的例子。

    body {
    background-color: #6B6B6B;
    font-family: Arial;
    color: grey;
    font-size: 12px;
    margin: 0px;
}
    /*............... bgcover ...............*/

    .bgcover {
    position: fixed;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, .4);
}
    .call {
    position: fixed;
    top: 100px;
    left: 100px;
}
    /*........ crossfade on buttons ........*/

    .hover,.nohover{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;
}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}

.hidden{
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bgcover" id=box align="center">
<p>Button turns off this bg cover div.</p>
</div>

<div class="call">
  <a id="btn" onclick="document.getElementById('box').classList.toggle('hidden');" >
<img src="http://wizzfree.com/pix/call2.png" width="100" class="nohover">
<img src="http://wizzfree.com/pix/call.png" width="100" class="hover"></a>
</div>

Answer 2

1. 定义交互式节点和目标节点。
2. 创建事件监听器来处理点击事件。
3. 创建一个隐藏第二个元素的函数

  const button = document.getElementById('button'); // or classname, whatever. it is your link or any node element instead of it. 
  const div = document.getElementById('targetDiv');

  function toggleDiv(e) {
    // e - event object - {button}.
    e.preventDefault(); // only if you use <a> as node.
    
    div.classList.add("my-classname-to-hide-div");
  }

  button.addEventListener('click', toggleDiv, false);

css

  .my-classname-to-hide-div {
    display: none; 
    // or 
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s all;
  }

ps。如果你使用 JQuery，代码会更简单，你可以使用内置的过渡效果。