How to make a text disappear for mouseout in JS?

I was looking for an answer all over the website but nothing helps, I hope you guys will find the solution for me because it seems I can't :D I am really-really new at JS (and JQuery) so my code may seem dumb/too simple for lots of you

I have 5 different img-s (1 class for all, 1 container for the 5 imgs) and 5 different span-s (5 different ID-s and 1 class). On mouseover I did 5 functions so when I move my mouse over the img the proper text appears. Great.

But I would like to make the text disappear on mouseout. I am sure I can solve it calling that one class (.text), but I don't know how. Any ideas? :)

I am over the "toggle", "for", "if" orders but nothing seems to help. Thank you in advance :)

function aboutme() {
  document.getElementById("aboutme-text").style.visibility = "visible";
}

function classtypes() {
  document.getElementById("classtypes-text").style.visibility = "visible";
}
.text {
  color: #dfdfdf;
  text-shadow: 0px 0px 10px #e75b00;
  font-size: 36px;
  font-weight: 800;
  display: inline;
}

#aboutme-text {
  margin-left: 70px;
  visibility: hidden;
}

#classtypes-text {
  margin-left: 280px;
  visibility: hidden;
}
<div id="DT1" onMouseOver="aboutme()" onMouseOut="disappear()">
  <img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>

<div id="DT2" onMouseOver="classtypes()" onMouseOut="disappear()">
  <img src="assets/images/classtypes-1.jpg" alt="ÓRATÍPUSOK" class="desktopimg">
</div>

<span class="text" id="aboutme-text">RÓLAM</span>
<span class="text" id="classtypes-text">ÓRATÍPUSOK</span>



Read more here: https://stackoverflow.com/questions/64899012/how-to-make-a-text-disappear-for-mouseout-in-js

Content Attribution

This content was originally published by Katalin at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: