Question

我的一个传说被称为“热量生产”，当用户将鼠标悬停在该传奇上时，我需要一个隐藏的div来显示热量产生的含义。我有六个传说需要将hover和mousemove事件附加到。

这是我到目前为止所做的：

var moveLeft = 20;
var moveDown = 10;

$('???').hover(function(e) {
   $('#pop-up-heat-production').show();
}, function() {
   $('#pop-up-heat-production').hide();
});

$('???').mousemove(function(e) {
   $("#pop-up-heat-production").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});

......哪里???是传奇的名字，＃pop-up-heat-production是我隐藏的div，解释了这个传说的含义。我猜一个for循环可以用来迭代所有的图例并附加悬停和mousemove事件，但这是怎么做到的？我已经玩了下一个代码示例，但所有的图例都附上了最后一个图例！：

events: {
                load: function () {
                    var chart = this,
                        legend = chart.legend;
                    for (var i = 0, len = legend.allItems.length; i < len; i++) {
                        var item = legend.allItems[i].legendItem;
                        var name = item.text;
                        item.on('mouseover', function (e) {
                            //show custom tooltip here
                            console.log(name);  
                        }).on('mouseout', function (e) {
                            //hide tooltip
                            //console.log("mouseout");
                        });
                    }

                }
            }

当鼠标悬停事件触发所有图例时，将最后一个图例的名称输出到控制台！

是的，这是我隐藏的div：

<div id="pop-up-heat-production">
   <p><strong>Heat production</strong></p>
   <p>Some explanation here...</p>
</div>

提前致谢。

Answer 1

图表容器对象上的委托事件如何： http://jsfiddle.net/8zon8tLp/

$('#container').on('mouseenter','.highcharts-legend-item',function(event) {
    var seriesName = $(this).text();
    $(".tooltip[data-series='" + seriesName + "']").css({left:event.clientX, top:event.clientY}).show();
}).on('mouseleave','.highcharts-legend-item',function(event) {
    var seriesName = $(this).text();
    $(".tooltip[data-series='" + seriesName + "']").hide();
});

在Highcharts Legend中使用mouseover事件来显示隐藏的div

1 个答案: