將鼠標懸停在整個容器內容上

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的位置（絕對位置），它比圖表「超過」。