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>

トゥーチップ効果を作成するには、これを行います

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

mouseleaveとのトリガーを避ける方法はmouseenter?

アップデート：

パディング値を切り替えることで、点滅を取り除くことができましたが、コンテナもoverflow:hidden;ツールチップ全体をブロックしているためです。何か案は？

このアップデートのフィドルは次のとおりです。

4

1 に答える 1

0

あなたの2番目のフィドルは非常に紛らわしく、ツールチップを非表示にしますが、最初のものはうまくいきました。私（クロム）にとってはまったく点滅しません。ツールチップが通常行うように動作するだけです-ホバー時に表示され、マウスを離すと消えます。

tipsy.jsの使用をお勧めします。これは優れた jQuery プラグインであり、タスクをより迅速かつ簡単に実行し、ブラウザー間の互換性を高めるのに役立ちます。

于 2012-10-24T06:54:18.343 に答える