創建hoverable提示

我基本上是想創建一個提示的作用。 BUt當我瀏覽工具提示區域時，該框閃爍。這是由於mouseleave和mouseenter被觸發。

基礎，結構是這樣的

<section id="tooltipContainer"> 
    <ul> 
     <li> 
      <a>Text that is show up</a> 
      <div class="extension"> <!-- Tool Tip Division --> 
       text 
      </div> 
     </li> 
    </ul> 
</section>

要創建tootip效果，我做這個

$("li").on('mouseenter', function() { 
    $(this).children(".extension").stop().fadeIn(); 
}).on('mouseleave', function() { 
    $(this).children(".extension").stop().delay(500).fadeOut(); 
});

如何避免觸發mouseleave和mouseenter？

更新：

通過切換填充值，我能夠擺脫閃爍，但由於容器也有overflow:hidden;所以現在擋住了整個提示。有任何想法嗎？

下面是本次更新的小提琴：here

來源

2012-10-24 mrN

你的第二小提琴是非常混亂，它隱藏的工具提示，第一個運行良好，但。它對我來說根本不閃光（鉻），它就像一個工具提示通常一樣 - 在懸停時顯示並在我移開鼠標時消失。

我會建議使用tipsy.js，這是一個不錯的jQuery插件，可以幫助你完成你的任務更快/更方便，更多的跨瀏覽器兼容。

來源

2012-10-24 06:54:18

我不是尋找替代。我想用上面的一個非常簡單的代碼。我也在使用chrome，在第一個小提琴中，提示總是淡出，然後再次爲我淡出。 – mrN

試試這個[fiddle]（http://jsfiddle.net/y4LMk/6/）。當我將鼠標指針懸停在「portfo」或「other 2」框上時，它只是按預期顯示工具提示，不會閃爍。將鼠標移出這些區域之一後，它會消失。 –

這真的是最糟糕的閃光。現在它進出出入。 – mrN

創建hoverable提示

回答

相關問題