How to make a text disappear for mouseout in JS?

user_14638084 0
Viewed 263

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>

html jquery javascript
3 Answers

In your code was missing disappear() function.

In the same way as I did the "disappear()" function, you can also make the function to display the text. In a sense, you can use an argument. The argument is the ID of the element you want to hide

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

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

function disappear(x) {
    document.getElementById(x).style.visibility = "hidden";
}
.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('aboutme-text')">
    <img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>

<div id="DT2" onMouseOver="classtypes()" onMouseOut="disappear('classtypes-text')">
    <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>

It will be more convenient if you use "EventListener"

This script puts "EventListener" on all elements with class link

In the data-id attribute, enter the ID of the target element.

No need to change the script... just enter the attributes of the elements and the script will do everything else itself

Example:

var links = document.getElementsByClassName('link');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("mouseover", function () {
        var id = this.getAttribute('data-id');
        document.getElementById(id).style.visibility = "visible";
    });

    links[i].addEventListener("mouseout", function () {
        var id = this.getAttribute('data-id');
        document.getElementById(id).style.visibility = "hidden";
    });
}
.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" class="link" data-id="aboutme-text">
    <img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
</div>

<div id="DT2" class="link" data-id="classtypes-text">
    <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>

user_109681340

Is this what you're attempting?

I simply added your disappear function and simply applied hidden to each div.

Run the snippet below.

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

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

function disappear() {
  document.getElementById("classtypes-text").style.visibility = "hidden";
  document.getElementById("aboutme-text").style.visibility = "hidden";
}
.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>

user_33576770

I strongly suggest to delegate

I added the class hide to the spans and wrapped the links in a div

I use the toggle method of the classList to set or remove the hide class

const overout = e => { // one function to rule them all
  let tgt = e.target; // the `e` passed is the event(s) listened to. Here mouseover AND mouseout
  if (tgt.classList.contains("desktopimg")) tgt = tgt.closest(".link"); // if what is mousedover is the image, point to the div
  if (tgt.classList.contains("link")) { // here we have the div in the tgt - we check it is class="link"
    document.getElementById(tgt.dataset.id).classList.toggle("hide", e.type === "mouseout"); // toggle the class using the test for event type - mouseout, add class "hide" mouseover remove it 
  }
};
["mouseover","mouseout"] // the events we are interested in - we could add touchstart for mobiles for example
  .forEach(eventType => document.getElementById("container")  // the container we want to monitor
    .addEventListener(eventType, overout)); // add the listener for the eventType
.text {
  color: #dfdfdf;
  text-shadow: 0px 0px 10px #e75b00;
  font-size: 36px;
  font-weight: 800;
  display: inline;
}

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

#classtypes-text {
  margin-left: 280px;
}

.hide {
  display: none;
}
<div id="container">
  <div id="DT1" class="link" data-id="aboutme-text">
    <img src="assets/images/aboutme-1.jpg" alt="RÓLAM" class="desktopimg">
  </div>

  <div id="DT2" class="link" data-id="classtypes-text">
    <img src="assets/images/classtypes-1.jpg" alt="ÓRATÍPUSOK" class="desktopimg">
  </div>
</div>
<span class="text hide" id="aboutme-text">RÓLAM</span>
<span class="text hide" id="classtypes-text">ÓRATÍPUSOK</span>

user_2957830
Related