如何将文本显示到与JS或Jquery悬停在一起的相应div容器？

Question

我正在尝试显示当鼠标悬停在div属性中的文本时。我有三个div框，每个框中有三个文本。我知道我只能通过CSS来完成这项工作，但我是编码新手，并且正在努力更好地学习JS和Jquery。我一开始使用纯JS进行练习，起初，我只能在悬停时显示第一个框，而不能显示其他两个框，当我打印出vars到控制台时，我注意到它只拉动了divs的第一个元素，那是当我切换到.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个具有相同ID的div。ID 应该是唯一的。将 id 更改为类，并将 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();

     });

断续器

     <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>

断续器

.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

您正在 DOM 访问上使用 jQuery 功能。

你不能将鼠标悬停在隐藏的东西上，所以我的答案将div移出锚点。

正如J Doe所指出的，文本ID应该更改为类，因为ID需要是唯一的 - 这与实际问题无关。

这是vanilla版本 - 我通常会委托，但在这种情况下，我们需要在每个链接上都有一个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>