Question

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

一旦鼠标“超出目标”，它就会收缩，但如果鼠标仍然在图表上，它应该保持显示。

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

我为这个问题提出了jsFiddle，而不是在这里粘贴一大堆代码。

修改

Here是一个目标示例。

Answer 1

您可以通过定义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>

Live Example

Answer 2

最佳解决方案是将其更改为.click()

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

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

http://jsfiddle.net/fnTXQ/

鼠标悬停时显示Google饼图

2 个答案: