Question

我有一个目标<div class="outter">，另一个<div class="inner">作为工具提示，

<div class="outter"></div>
<div class="inner"></div>

默认情况下，工具提示是不可见的，当我将鼠标悬停在“outter”上时，“inner”将出现在“outter”中，直到鼠标移出“outter”，“内部”将会消失。

$(".outter").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

但是当鼠标没有从“outter”移出时，同时鼠标在“outter”的“内部”，问题发生了：内部的一个闪现，不稳定

the online case here

那么这个案子有什么问题？

我希望内心会稳定，而不是闪现。请帮助，谢谢：）

Answer 1

如果这是一个选项，最简单的解决方案是使用您的元素，如命名：

<div class="outter">
  <div class="inner"></div>
</div>

...然后您当前的代码工作正常，因为mouseleave在输入.inner元素时不会触发，因为它是一个孩子。 You can test it here

Answer 2

这可能不是理想的解决方案，但试试这个

$(".outter, .inner").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

updated demo

在jquery中悬停效果和功能

2 个答案: