1

我想在鼠标悬停某个元素时显示我的图表。一切正常,除了我无法停止 slideToggle 返回其原始位置。

一旦鼠标“超出目标”,它就会收缩,但如果鼠标仍在图表上,它应该会继续出现。

$(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()

但是,如果您需要在将鼠标悬停 TEST 移动时显示图表并在将鼠标移回测试时隐藏图表,那么您.mouseenter()

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

http://jsfiddle.net/fnTXQ/

于 2012-11-15T00:06:22.113 回答