0

这是我正在尝试的演示。

我基本上是在尝试创建工具提示效果。但是当我浏览工具提示区域时，该框会闪烁。这是由于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();
});​

如何避免触发mouseleaveand mouseenter？

更新：

通过切换填充值，我能够摆脱闪烁，但由于容器overflow:hidden;现在也有阻塞整个工具提示。有任何想法吗？

这是此更新的小提琴：这里

4

1 回答 1

0

您的第二个小提琴非常令人困惑，它隐藏了工具提示，但第一个工作正常。它对我来说根本不会闪烁（chrome），它的行为就像通常的工具提示一样 - 在悬停时显示并在我将鼠标移开时消失。

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

于 2012-10-24T06:54:18.343 回答