Как отобразить текст в соответствующем контейнере div при наведении курсора на JS или Jquery?

Question

Я пытаюсь показать текст, находящийся в свойстве div, при наведении курсора мыши на него. У меня есть три блока div и три текста в каждом блоке. Я знаю, что могу достичь sh этого только CSS, но я новичок в кодировании и пытаюсь выучить JS и Jquery лучше.

Я тренировался с чистым JS и во-первых, и я мог показать только первое окно при наведении, но не два других, и когда я распечатал вары на консоли, я заметил, что он вытягивает только первые элементы div, тогда я переключился на .querySelectorAll чтобы получить все три элемента, но теперь я не знаю, как использовать this / event.target / event.currentTarget. Я предполагаю, что это то, что я бы использовал, чтобы отобразить целевой элемент, но я не знаю, как их использовать.

let text = document.querySelectorAll('a div');
let pic = document.querySelectorAll('.boxcontainer a')


pic.addEventListener("mouseenter", function() {
  this.style.visibility = 'visible';

});

pic.addEventListener("mouseleave", function() {
  this.style.visibility = 'hidden';
});

.boxcontainer {
  width: 30%;
  height: 50%;
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.boxcontainer a {
  box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);
  margin: 10px;
  padding-top: 10%;
  padding-bottom: 10%;
  text-decoration: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxcontainer a:hover {
  transform: scale(1.1);
  color: white;
}

#text {
  visibility: hidden;
}

<div class="boxcontainer">

  <a href="asia.html" style="background-color:#46515a;">
    <div id='text'>asia.</div>
  </a>
  <a href="americas.html" style="background-color: #2d343a;">
    <div id='text'>americas.</div>
  </a>
  <a href="europe.html" style="background-color: #1a1f22;">
    <div id='text'>europe.</div>
  </a>

</div>

Answer 1

Непосредственная проблема, которую я вижу, заключается в том, что у вас есть 3 блока с одинаковым идентификатором. Идентификатор должен быть уникальным. Измените идентификатор на класс и измените ссылку javascript на класс:

let text = document.querySelectorAll(".text");

Answer 2

Я получил свой ответ, спасибо всем, кто помог

jQuery

  $('.text').hide();

     $(".boxcontainer a").on('mouseenter', function() {

     $(this).find('.text').fadeIn(300);
     });

     $(".boxcontainer a").on('mouseleave',function() {

     $(this).find('.text').hide();
     });

HTML

     <div class="boxcontainer">

                    <a href="asia.html" style="background-color:#46515a;"> <div class = 'text'>asia.</div></a> 
                    <a href="americas.html" style="background-color: #2d343a;"> <div class='text'>americas.</div></a>
                    <a href="europe.html" style="background-color: #1a1f22;"><div class='text'>europe.</div></a>

            </div>

CSS

.boxcontainer{
    width: 30%;
    height: 50%;
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.boxcontainer a{
    box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);
    margin: 10px;
    padding-top: 10%;
    padding-bottom: 10%;
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;


}

.boxcontainer a:hover{
    transform: scale(1.1);
    color: white;
}

Answer 3

Вы используете jQuery функциональность при доступе к DOM.

Вы не можете навести курсор мыши на скрытые вещи, поэтому мой ответ перемещает div из якорей.

Как указал Дж. Доу, текстовый идентификатор должен быть изменен на класс, поскольку идентификаторы должны быть уникальными - это не имеет никакого отношения к реальной проблеме, хотя

Вот и обычная версия - я бы обычно делегировал, но в этом случае нам нужен eventListener для каждой ссылки

const overAndOut = e => {
  const tgt = e.target; 
  if (tgt.tagName === "A") {
    tgt.nextElementSibling.classList.toggle('text', e.type === "mouseleave")
  }
};
[...document.querySelectorAll('#boxcontainer a')].forEach(link => {
  link.addEventListener('mouseover', overAndOut)
  link.addEventListener('mouseleave', overAndOut)
})  

.boxcontainer {
  width: 30%;
  height: 50%;
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.boxcontainer a {
  box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);
  margin: 10px;
  padding-top: 10%;
  padding-bottom: 10%;
  text-decoration: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxcontainer a:hover {
  transform: scale(1.1);
  color: white;
}

.text {
  visibility: hidden;
}

<div id="boxcontainer">

  <a href="asia.html" style="background-color:#46515a;">Asia</a>
  <div class='text'>asia.</div>
  <a href="americas.html" style="background-color: #2d343a;">Americas</a>
  <div class='text'>Americas.</div>
  <a href="europe.html" style="background-color: #1a1f22;">Europe</a>
  <div class='text'>Europe.</div>
</div>

jQuery:

$('#boxcontainer a').on("mouseenter", function() {
    $(this).next().removeClass("text")
  })
  .on("mouseleave", function() {
    $(this).next().addClass("text")
  });

.boxcontainer {
  width: 30%;
  height: 50%;
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.boxcontainer a {
  box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);
  margin: 10px;
  padding-top: 10%;
  padding-bottom: 10%;
  text-decoration: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxcontainer a:hover {
  transform: scale(1.1);
  color: white;
}

.text {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
  <a href="asia.html" style="background-color:#46515a;">Asia</a>
  <div class='text'>Asia.</div>

  <a href="americas.html" style="background-color: #2d343a;">Americas</a>
  <div class='text'>Americas.</div>

  <a href="europe.html" style="background-color: #1a1f22;">Europe</a>
  <div class='text'>Europe.</div>

</div>