Question

我想在悬停div时显示工具提示。当鼠标悬停在use Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface; use Symfony\Component\DependencyInjection\ContainerAwareTrait; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\Security\Core\Authentication\Token\TokenInterface; use Symfony\Component\HttpFoundation\RedirectResponse; class AuthenticationHandler implements AuthenticationSuccessHandlerInterface{ use ContainerAwareTrait; /** * {@inheritDoc} * @see \Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface::onAuthenticationSuccess() */ public function onAuthenticationSuccess(Request $request, TokenInterface $token) { $token->getUser()->setAnmeldat(new \DateTime("now")); $this->container->get('doctrine')->getEntityManager()->flush(); return new RedirectResponse($this->container->get('router')->generate('/auth/bnme')); } }时，也应显示它。

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

现在我想为mouseout添加一个延迟，当它获得新的鼠标悬停时会被取消，但我不知道如何。

＆＃13;

tooltip-div

＆＃13;

document.getElementById("hoverElem").addEventListener("mouseover", function() {
  document.getElementById("displayElem").style.visibility = "visible";
});

document.getElementById("hoverElem").addEventListener("mouseout", function() {
  document.getElementById("displayElem").style.visibility = "hidden";
});

＆＃13;

#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;
}

＆＃13;

Answer 1

您是否考虑过使用纯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>

Answer 2

您可以在mouseleave中启动计时器，然后在mouseenter中清除它 displayElem喜欢

＆＃13;

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";
});

＆＃13;

#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;
}

＆＃13;

<div id="hoverElem">
  A little Div
  <div id="displayElem">
    Tooltip to show
  </div>
</div>

＆＃13;

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

2 个答案: