I've tried to use a loop to add an event listener for the mouse entering and exiting the text but I cant seem to figure it out.

//hide text by default
for (i = 0; i < document.querySelectorAll("#answer").length; i++) {
  document.querySelectorAll("#answer")[i].style.visibility = "hidden";

}

//loop to add listeners to every answer to appear when hover, disappear when no hover
for (i = 0; i < document.querySelectorAll("#answer").length; i++) {
  document.querySelectorAll("#answer")[i].addEventListener("onmouseenter", appear);
  document.querySelectorAll("#answer")[i].addEventListener("onmouseleave", disappear);
}


//show text when hover
function appear() {
  document.getElementById("answer").style.visibility = "visible";
}

//hide text when not hover
function disappear() {
  document.getElementById("answer").style.visibility = "hidden";
}

<div id="Nouns">
  <h2 class="Word-title">Nouns</h2>
  <ul id="List-words">
    <li>eachother--<span id="Answer">서로</span></li>
    <li>Tongs--<span id="Answer">집게</span></li>
    <li>Scissors--<span id="Answer">가위</span></li>
    <li>Sentence--<span id="Answer">문장</span></li>
    <li>Grammar--<span id="Answer">문법</span></li>
    <li>Part--<span id="Answer">부분</span></li>
  </ul>
</div>

I've tried to use a loop to add an event listener for the mouse entering and exiting the text but I cant seem to figure it out.

//hide text by default
for (i = 0; i < document.querySelectorAll("#answer").length; i++) {
  document.querySelectorAll("#answer")[i].style.visibility = "hidden";

}

//loop to add listeners to every answer to appear when hover, disappear when no hover
for (i = 0; i < document.querySelectorAll("#answer").length; i++) {
  document.querySelectorAll("#answer")[i].addEventListener("onmouseenter", appear);
  document.querySelectorAll("#answer")[i].addEventListener("onmouseleave", disappear);
}


//show text when hover
function appear() {
  document.getElementById("answer").style.visibility = "visible";
}

//hide text when not hover
function disappear() {
  document.getElementById("answer").style.visibility = "hidden";
}

<div id="Nouns">
  <h2 class="Word-title">Nouns</h2>
  <ul id="List-words">
    <li>eachother--<span id="Answer">서로</span></li>
    <li>Tongs--<span id="Answer">집게</span></li>
    <li>Scissors--<span id="Answer">가위</span></li>
    <li>Sentence--<span id="Answer">문장</span></li>
    <li>Grammar--<span id="Answer">문법</span></li>
    <li>Part--<span id="Answer">부분</span></li>
  </ul>
</div>

• javascript
• html

• This question is very simular to this question. The only difference is hovering and clicking. – zer00ne Commented Mar 19 at 11:34

2 Answers 2

You cannot hover something that is hidden.

Also IDs need to be unique - I use a class

My strong advice: Delegate

const answers = document.getElementById('List-words');


const toggle = (e) => {
  const tgt = e.target.closest('li');
  if (!tgt) return;
  const answer = tgt.querySelector('.Answer');
  if (!answer) return;
  answer.hidden = (e.type === 'mouseout');
};


answers.addEventListener('mouseover', toggle);
answers.addEventListener('mouseout', toggle);

<div id="Nouns">
  <h2 class="Word-title">Nouns</h2>
  <ul id="List-words">
    <li>eachother--<span class="Answer" hidden>서로</span></li>
    <li>Tongs--<span class="Answer" hidden>집게</span></li>
    <li>Scissors--<span class="Answer" hidden>가위</span></li>
    <li>Sentence--<span class="Answer" hidden>문장</span></li>
    <li>Grammar--<span class="Answer" hidden>문법</span></li>
    <li>Part--<span class="Answer" hidden>부분</span></li>
  </ul>
</div>

Even stronger: CSS - I added some padding to improve not hovering on a neighbour

#List-words {
  list-style: none;
  padding: 0;
}

#List-words li {
  padding: 5px;
}

.Answer {
  display: none; /* Hidden by default */
}

#List-words li:hover .Answer {
  display: inline; /* Show when hovering over the li */
}

<div id="Nouns">
  <h2 class="Word-title">Nouns</h2>
  <ul id="List-words">
    <li>eachother--<span class="Answer">서로</span></li>
    <li>Tongs--<span class="Answer">집게</span></li>
    <li>Scissors--<span class="Answer">가위</span></li>
    <li>Sentence--<span class="Answer">문장</span></li>
    <li>Grammar--<span class="Answer">문법</span></li>
    <li>Part--<span class="Answer">부분</span></li>
  </ul>
</div>

CSS Click is trickier than hover

#List-words {
  list-style: none;
  padding: 0;
}

#List-words li {
  padding: 5px;
  line-height: 1.5em;  /* Sets a consistent height for each line to stop the Korean from moving the text */
  min-height: 1.5em;   /* Makes sure the li maintains this height */
}

.toggle-checkbox {
  display: none;
}

.Answer {
  display: none;
  min-width: 50px;
  /* Reserves horizontal space for the answer */
}

.toggle-checkbox:checked+label .Answer {
  display: inline;
}

label {
  cursor: pointer;
  display: inline-block;
  min-width: 100px;   /* Reserves space for the question */
  line-height: 1.5em; /* Matches the li line-height */
}

<div id="Nouns">
  <h2 class="Word-title">Nouns</h2>
  <ul id="List-words">
    <li>
      <input type="checkbox" class="toggle-checkbox" id="item1">
      <label for="item1">eachother -- <span class="Answer">서로</span></label>
    </li>
    <li>
      <input type="checkbox" class="toggle-checkbox" id="item2">
      <label for="item2">Tongs -- <span class="Answer">집게</span></label>
    </li>
    <li>
      <input type="checkbox" class="toggle-checkbox" id="item3">
      <label for="item3">Scissors -- <span class="Answer">가위</span></label>
    </li>
    <li>
      <input type="checkbox" class="toggle-checkbox" id="item4">
      <label for="item4">Sentence -- <span class="Answer">문장</span></label>
    </li>
    <li>
      <input type="checkbox" class="toggle-checkbox" id="item5">
      <label for="item5">Grammar -- <span class="Answer">문법</span></label>
    </li>
    <li>
      <input type="checkbox" class="toggle-checkbox" id="item6">
      <label for="item6">Part -- <span class="Answer">부분</span></label>
    </li>
  </ul>
</div>

Element ID's must be unique (so you can not use id="Answer" for each answer span).

Anyway: maybe you don't need JS at all.

Here is a simple css solution. The hovering should occur on span.Answer's parent element (<li>) of course.

.Answer {
  display: none;
}

#List-words li {
  cursor: pointer;
  
}

#List-words li:hover .Answer {
  display: revert;
  color: red;
}

<div id="Nouns">
  <h2 class="Word-title">Nouns</h2>
  <ul id="List-words">
    <li>eachother--<span class="Answer">서로</span></li>
    <li>Tongs--<span class="Answer">집게</span></li>
    <li>Scissors--<span class="Answer">가위</span></li>
    <li>Sentence--<span class="Answer">문장</span></li>
    <li>Grammar--<span class="Answer">문법</span></li>
    <li>Part--<span class="Answer">부분</span></li>
  </ul>
</div>