Есть канвас, на котором рисуется график. Нужно сделать чтобы при наведении на график на нём появлялась полоска (серая полоска на скрине)
В данный момент делаю это так:
При наведении на canvas графика, при условии что курсор находится внутри графика отрисовываю html блок поверх канваса по координате x мыши и на высоту графика. Но проблема заключается в том, что когда данная полоска попадает под курсор - она пропадает. Как сделать так, чтобы данный блок не реагировал на взаимодействие с ним?
html:
<div class="mainChart" style="position: relative;">
<canvas id="mainChartCanvas" width="1200" height="400"></canvas>
<div class="chartContainer__overlay"></div>
</div>
js(jquery):
$('.mainChart').on('mousemove', function(evt){
let lineWidth = 2;
//Если курсор в области графика
if(evt.offsetX > chartCanvas[0].chartArea.left && evt.offsetX < chartCanvas[0].chartArea.right && evt.offsetY > 0 && evt.offsetY < chartCanvas[0].chartArea.bottom) {
$('.chartContainer__overlay').css('left', evt.offsetX);
$('.chartContainer__overlay').css('width', lineWidth);
$('.chartContainer__overlay').css('height', chartCanvas[0].chartArea.bottom);
} else {
$('.chartContainer__overlay').css('width', 0);
}
});
