Как сделать всплывающий текст исчезающим после/при клике?

avatar
Somebody
8 апреля 2018 в 09:19
1449
1
3

Я новичок в 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");
}

Я хотел бы сделать так, чтобы после нажатия кнопки (изображения) всплывающий текст исчезал Не могли бы вы рассказать мне, как это сделать? Заранее спасибо за любую помощь

Источник

Ответы (1)

avatar
Willem van der Veen
8 апреля 2018 в 11:54
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 для упрощения).