1

マウスが要素の上にあるときにチャートを表示したい。スライドトグルが元の位置に戻るのを止められないことを除いて、すべて正常に動作します。

マウスが「ターゲット外」になると縮小しますが、マウスがまだチャートにある場合は表示されたままになります。

$(document).ready(function () {
            $("#test").hover(function () {
                $("#chart_div").slideToggle('slow');
            });
        });

ここにコード全体を貼り付けるのではなく、この質問のためにjsFiddleを作成しました。

編集

これが目標の例です。

4

2 に答える 2

2

次のサンプルのように、mouseenter イベントと mouseleave イベントの両方を定義することで実行できます。

$(document).ready(function() {
    $("#test").mouseenter(function() {
        $("#chart_div").show('slow');
    });
    $(".outerClass").mouseleave(function() {
        if(!$('#chart_div').is(':hover')) {
            $("#chart_div").hide('slow');
        }
    });
});​

HTML 構造がこのサンプルに似ている場所:

<div class="outerClass">
    <div id="test"><strong>TEST.</strong></div>
    <div id="chart_div"></div>
</div>
<div id="another_div">here is out of the pie div</div>

実際の例

于 2012-11-15T00:17:09.393 に答える
1

最善の解決策は、これを.click()

ただし、マウスをテストの上に移動するとグラフを表示し、マウスをテストの上に戻すと非表示にする必要がある場合は、.mouseenter()

$(document).ready(function() {
    $("#test").mouseenter(function() {
        $("#chart_div").slideToggle('slow');
    });
});​

http://jsfiddle.net/fnTXQ/

于 2012-11-15T00:06:22.113 に答える