Highcharts legend item hover event? - highcharts

Question

I have a chart where I want some series not to be clickable in the legend, but others to be clickable. That was easy, because there was a legendItemClick event that I could make do nothing depending on the series. An example is here: http://jsfiddle.net/9PqyG/3/
My problem is that the mouse pointer still changes from the arrow to the clickable-link-hand-pointer, and I don't want anyone thinking that this is clickable. I know that I can change the itemHoverStyle parameter to make the arrow appear for all the legend items, but that will change it for every series.
Can I make this happen only for a particular series?

Answer 1

I would up just using a CSS selector:
.highcharts-legend-item:first-child:hover { cursor:crosshair; }

Answer 2

I make it actually with modal with mouse hover event, This is how you can do this, please insert this code in your chart function:
$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
var seriesName = $(this).text();
if (seriesName === "this_series_name") {
$('#myModal').modal('toggle');
}
});
Then you can make a modal div to open with hover event like this one below
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
your message here
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Ok
</button>
</div>
</div>
</div>
</div>
this is a demo