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

I'm kinda a beginner in HTML, so I'd like to ask your help. so I have this code: HTML:

我有点像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 ;}
}

Script:

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

What I'd like to do, is that after I click on the button(the image), I'd like the pop up text to disappear Could you please tell me how to do it? Thanks for any help in advance

我想做的是,在我点击按钮(图像)之后,我想要弹出文本消失你能告诉我怎么做吗?在此先感谢您的帮助

1 个解决方案

#1

Here is an example you might find interesting:

这是一个你可能会感兴趣的例子:

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>

1 个解决方案

#1

更多相关文章

随机推荐