如何将文本显示到与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&nbsp; $('.text').hide();&nbsp; &nbsp; &nbsp;$(".boxcontainer a").on('mouseenter', function() {&nbsp; &nbsp; &nbsp;$(this).find('.text').fadeIn(300);&nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp;$(".boxcontainer a").on('mouseleave',function() {&nbsp; &nbsp; &nbsp;$(this).find('.text').hide();&nbsp; &nbsp; &nbsp;});断续器&nbsp; &nbsp; &nbsp;<div class="boxcontainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="asia.html" style="background-color:#46515a;"> <div class = 'text'>asia.</div></a>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="americas.html" style="background-color: #2d343a;"> <div class='text'>americas.</div></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="europe.html" style="background-color: #1a1f22;"><div class='text'>europe.</div></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>断续器.boxcontainer{&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height: 50%;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; z-index: 100;}.boxcontainer a{&nbsp; &nbsp; box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);&nbsp; &nbsp; margin: 10px;&nbsp; &nbsp; padding-top: 10%;&nbsp; &nbsp; padding-bottom: 10%;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: white;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;}.boxcontainer a:hover{&nbsp; &nbsp; transform: scale(1.1);&nbsp; &nbsp; color: white;}

Answer 3

您正在 DOM 访问上使用 jQuery 功能。你不能将鼠标悬停在隐藏的东西上，所以我的答案将div移出锚点。正如J Doe所指出的，文本ID应该更改为类，因为ID需要是唯一的 - 这与实际问题无关。这是vanilla版本 - 我通常会委托，但在这种情况下，我们需要在每个链接上都有一个eventListenerconst overAndOut = e => {&nbsp; const tgt = e.target;&nbsp;&nbsp; if (tgt.tagName === "A") {&nbsp; &nbsp; tgt.nextElementSibling.classList.toggle('text', e.type === "mouseleave")&nbsp; }};[...document.querySelectorAll('#boxcontainer a')].forEach(link => {&nbsp; link.addEventListener('mouseover', overAndOut)&nbsp; link.addEventListener('mouseleave', overAndOut)})&nbsp;&nbsp;.boxcontainer {&nbsp; width: 30%;&nbsp; height: 50%;&nbsp; position: fixed;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; z-index: 100;}.boxcontainer a {&nbsp; box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);&nbsp; margin: 10px;&nbsp; padding-top: 10%;&nbsp; padding-bottom: 10%;&nbsp; text-decoration: none;&nbsp; color: white;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.boxcontainer a:hover {&nbsp; transform: scale(1.1);&nbsp; color: white;}.text {&nbsp; visibility: hidden;}<div id="boxcontainer">&nbsp; <a href="asia.html" style="background-color:#46515a;">Asia</a>&nbsp; <div class='text'>asia.</div>&nbsp; <a href="americas.html" style="background-color: #2d343a;">Americas</a>&nbsp; <div class='text'>Americas.</div>&nbsp; <a href="europe.html" style="background-color: #1a1f22;">Europe</a>&nbsp; <div class='text'>Europe.</div></div>jQuery：$('#boxcontainer a').on("mouseenter", function() {&nbsp; &nbsp; $(this).next().removeClass("text")&nbsp; })&nbsp; .on("mouseleave", function() {&nbsp; &nbsp; $(this).next().addClass("text")&nbsp; });.boxcontainer {&nbsp; width: 30%;&nbsp; height: 50%;&nbsp; position: fixed;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; z-index: 100;}.boxcontainer a {&nbsp; box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);&nbsp; margin: 10px;&nbsp; padding-top: 10%;&nbsp; padding-bottom: 10%;&nbsp; text-decoration: none;&nbsp; color: white;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}.boxcontainer a:hover {&nbsp; transform: scale(1.1);&nbsp; color: white;}.text {&nbsp; visibility: hidden;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="boxcontainer">&nbsp; <a href="asia.html" style="background-color:#46515a;">Asia</a>&nbsp; <div class='text'>Asia.</div>&nbsp; <a href="americas.html" style="background-color: #2d343a;">Americas</a>&nbsp; <div class='text'>Americas.</div>&nbsp; <a href="europe.html" style="background-color: #1a1f22;">Europe</a>&nbsp; <div class='text'>Europe.</div></div>