html - 如何使弹出文本在点击后/点击后消失？

Question

我是 HTML 的初学者，所以我想寻求您的帮助。所以我有这段代码: HTML:

<div class="popup" onmouseover="popup()">
<span class="popuptext" id="myPopup">Click for more</span>

<button onclick="ak12M()"> <img id="ak-12" src="ak-12.png"/>AK-12</button> 
</div>
<input type="button" id="ak12B" value="Weapon info"             
onclick="location.href='http://symthic.com/bf4-weapon-info?w=AK-12'";/>
<p id="ak-12SZ">The AK-12, formerly AK-200,<br> is an accurate and powerful 
Russian Assault Rifle.<br> It fires the 5.45x39mm WP cartridge.</p>

CSS:

.popup {
position: relative;
display: inline-block;
cursor: pointer;
}


.popup .popuptext {
visibility: hidden;
width: 160px;
 color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
left:50%;
position: absolute;
z-index: 1;
bottom: 125%;
 background-color: #555;
margin-left: -80px;
}


.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent;
}


.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 0.5s;
}


@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}

脚本:

function popup() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}

我想要做的是，在我点击按钮(图片)之后，我希望弹出的文本消失 你能告诉我怎么做吗？ 提前感谢您的帮助

Answer 1

这是一个您可能会感兴趣的示例:

function toggleInfo() {

  let text = document.getElementById("akText");
  
  if(text.style.visibility === 'hidden'){
    text.style.visibility = 'visible';
  } else {
      text.style.visibility = 'hidden';
  }
  

}

.akimage {
  width: 100px;
  height: 100px;
  background-color: green;
  line-height: 100px;
  text-align: center;
}

<div class="akimage" onclick="toggleInfo()">
  click me
</div>

<span id="akText">
  AKA text,   AKA text,   AKA text,  AKA text,
</span>

在示例中，可见性 CSS 属性在 toggleInfo 函数中切换，当它们在我们的“图像”(现在为简化的 div)上单击时调用该函数。