将鼠标悬停在整个容器内容上

Question

如何在鼠标悬停的整个Highcharts图表上显示OVERLAY效果？

类似contentHover

东西也增加更多的显示的另一图表从contentHover任何超链接的点击！

Answer 1

您可以使用jQuery的悬停的方法是这样的：http://jsfiddle.net/3zUGj/

覆盖div的内容可以是任何你喜欢的。覆盖图的零不透明度开始。内.hover事件方法覆盖可以显示或隐藏通过操纵不透明或与其他jQuery效果：显示，隐藏，淡入，淡出等

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
<div id="contentHover" style="min-width: 400px; height: 400px; margin: 0 auto; background:#999; text-align:center; padding:20px;top:0px; position:absolute; z-index:100; opacity:0"><a href="">New Graph</a></div> 

JS

// high chart 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     … highcharts implementation … 
    }); 
}); 

// show hide the contentHover div on hover 
var hover = $('#contentHover'); 
$('#contentHover').hover(function(){ 
    hover.css('opacity','1'); 
}, function(){ 
    hover.css('opacity','0'); 
}); 

// add click event to all links within contentHover, add new chart 
$('#contentHover').on('click','a',function(){ 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line' 
     }, 
     … highcharts implementation … 
    }); 
    return false; 
}); 

Answer 2

您可以添加鼠标悬停/鼠标动作图表conainer div。

即。

$('#container').mouseover(function(event){ 

$（'＃overlay'）。show（）;

}）鼠标移出（函数（事件）{

$（ '＃覆盖'）隐瞒（）;

}）;

其中overlay是div的位置（绝对位置），它比图表“超过”。