当鼠标悬停时显示Google饼图
当鼠标悬停时显示Google饼图
提问于 2012-11-15 07:50:29
当鼠标悬停在某个元素上时，我想显示我的图表。一切正常，除了我不能停止slideToggle返回到它的原始位置。
一旦鼠标“超出目标”，它就会收缩，但如果鼠标仍然停留在图表上，它应该保持显示状态。
$(document).ready(function () {
$("#test").hover(function () {
$("#chart_div").slideToggle('slow');
});
}); 我为这个问题做了一个jsFiddle，而不是在这里粘贴一大堆代码。
编辑
Here就是一个目标示例。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-11-15 08:17:09
您可以通过定义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
Stack Overflow用户
发布于 2012-11-15 08:06:22
最好的解决方案是将其更改为.click()
但是，如果您需要在将鼠标移到测试上时显示图表，而在将鼠标移回测试时隐藏图表，那么您可以使用.mouseenter()
$(document).ready(function() {
$("#test").mouseenter(function() {
$("#chart_div").slideToggle('slow');
});
});http://jsfiddle.net/fnTXQ/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13389415
复制相关文章
相似问题
腾讯云开发者
