JavaScript-当鼠标在项目上时，如何添加工具提示？-堆栈溢出

顺晟科技

2022-10-19 14:06:36

182

我想要wen我点击第一段，id为«envie»的元素显示为工具提示，当鼠标离开时消失。

我的工具提示是显示第一个元素。我的意思是当我点击最后一个第一个元素时，工具提示仍然在第一个元素下面。

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  border: 1px solid black;
  margin: 5px;
}
.envoie-fr, .ship-fr {
margin-top: -25px;
  opacity: 1;
  z-index: 2000;
  visibility: visible;
  .transition(all 0.1s linear);

}

</style>

<script>
  window.addEventListener("load", () => {

    var x = document.querySelectorAll("#envoie");
console.log(x.length);

  });

</script>

</head>
<body>

<div>
  <div>
  <p class="#envoie">First Paragraph</p>
  <div id="envoie" class="envoie-fr">Envoie</div>
  </div>
  <div>
  <p class="#ship">Second Paragraph</p>
    <div id="ship" class="ship-fr">Ship</div>
  </div>
</div>
<hr />
<div>
  <div>
  <p class="#envoie">First Paragraph</p>
  <div id="envoie" class="envoie-fr">Envoie</div>
  </div>
  <div>
  <p class="#ship">Second Paragraph</p>
    <div id="ship" class="ship-fr">Ship</div>
  </div>
</div>


<div>
  <p class="#example" style="margin-top:50px">Bottom</p> 
</div>



</body>
</html> ```

顺晟科技：

您不需要任何脚本来实现此操作。另外，从您的问题标题中我可以看出，您希望工具提示在悬停时显示（而不是单击时），并在鼠标离开时消失（这就是工具提示的实际工作方式）。因此，下面是您的代码:

可以将title标记用作HTML元素的工具提示。

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  border: 1px solid black;
  margin: 5px;
}
.envoie-fr, .ship-fr {
margin-top: -25px;
  opacity: 1;
  z-index: 2000;
  visibility: visible;
  .transition(all 0.1s linear);

}

</style>

<script>
  window.addEventListener("load", () => {

    var x = document.querySelectorAll("#envoie");
console.log(x.length);

  });

</script>

</head>
<body>

<div>
  <div>
  <p class="#envoie">First Paragraph</p>
  <div id="envoie" class="envoie-fr">Envoie</div>
  </div>
  <div>
  <p class="#ship">Second Paragraph</p>
    <div id="ship" class="ship-fr">Ship</div>
  </div>
</div>
<hr />
<div>
  <div>
  <p class="#envoie">First Paragraph</p>
  <div id="envoie" class="envoie-fr">Envoie</div>
  </div>
  <div>
  <p class="#ship">Second Paragraph</p>
    <div id="ship" class="ship-fr">Ship</div>
  </div>
</div>


<div>
  <p class="#example" style="margin-top:50px">Bottom</p> 
</div>



</body>
</html> ```

上一篇：HTML-需要帮助理解嵌套-堆栈溢出下一篇：HTML-为什么我的JavaScri

网站建设

Html

JavaScript-当鼠标在项目上时，如何添加工具提示？-堆栈溢出