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）时，它们被调用。

点击后如何使弹出文本消失？

1 个答案: