Question

这是我正在尝试的demo。

我基本上是在尝试创建工具提示效果。 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

Answer 1

你的第二小提琴非常令人困惑，它隐藏了工具提示，但第一个工作正常。它对我来说根本不闪现（铬），它只是表现得像工具提示通常一样 - 当我将鼠标移开时显示悬停并消失。

我建议使用tipsy.js，它是一个不错的jQuery插件，可以帮助您更快/更轻松地完成任务，并提供更多的跨浏览器兼容性。

创建一个可扩展的工具提示

1 个答案: