js工具提示，带有延迟的mouseout，没有jQuery

js Tooltip with delayed mouseout without jQuery

本文关键字：mouseout 没有 jQuery 工具提示 js 延迟      更新时间：2023-12-27

我想在悬停div时显示工具提示。鼠标悬停tooltip-div时也应该显示该工具提示。

添加一个事件侦听器可以完成这项工作，但如果两个div不重叠，当鼠标位于它们之间并且工具提示消失时，mouseout调用就会消失。

现在，我想为mouseout添加一个延迟，当它得到一个新的mouseover时，它会被取消，但我不知道怎么做。

document.getElementById("hoverElem").addEventListener("mouseover", function() {
  document.getElementById("displayElem").style.visibility = "visible";
});
document.getElementById("hoverElem").addEventListener("mouseout", function() {
  document.getElementById("displayElem").style.visibility = "hidden";
});
#hoverElem {
  position: fixed;
  height: 100px;
  weidth: 200px;
  top: 0px;
  left: 50%;
  background-color: white;
}
#displayElem {
  position: fixed;
  height: 100px;
  weidth: 20px;
  top: 150px;
  left: 50%;
  background-color: yellow;
  visibility: hidden;
}
<div id="hoverElem">
  A little Div
  <div id="displayElem">
    Tooltip to show
  </div>
</div>

您可以在mouseleave中初始化计时器，然后在的mouseenter中清除它类displayElem

document.getElementById("hoverElem").addEventListener("mouseenter", function() {
  document.getElementById("displayElem").style.visibility = "visible";
});
var hoverTimer;
document.getElementById("hoverElem").addEventListener("mouseleave", function() {
  hoverTimer = setTimeout(function() {
    document.getElementById("displayElem").style.visibility = "hidden";
  }, 500);
});
document.getElementById("displayElem").addEventListener("mouseenter", function() {
  clearTimeout(hoverTimer);
});
document.getElementById("displayElem").addEventListener("mouseleave", function() {
  this.style.visibility = "hidden";
});
#hoverElem {
  position: fixed;
  height: 100px;
  weidth: 200px;
  top: 0px;
  left: 50%;
  background-color: white;
}
#displayElem {
  position: fixed;
  height: 100px;
  weidth: 20px;
  top: 150px;
  left: 50%;
  background-color: yellow;
  visibility: hidden;
}
<div id="hoverElem">
  A little Div
  <div id="displayElem">
    Tooltip to show
  </div>
</div>

您是否考虑过使用纯CSS？

div {
  position: fixed;
  height: 100px;
  width: 200px;
  top: 0px;
  left: 50%;
  background-color: black;
}
div:hover span,
span:hover{
  opacity:1;
}
span {
  display:block;
  opacity:0;
  color:orange;
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
  -webkit-transition:opacity 1s ;
  transition:opacity 1s ;
    
  
  position: fixed;
  height: 100px;
  width: 100px;
  top: 150px;
  left: 50%;
  background-color: yellow;
  visibility: visible;
}
<div>
  <span>lorem Ipsum</span>
</div>

相关文章：