javascript - 如何制作整体Chart.js V3.7.0 中的元素在悬停时将光标显示为指针？

Question

当我将鼠标悬停在它上面时，如何使我的canvas元素显示光标样式。pointer

HTML：

<canvas id="myChart"></canvas>

我都试过了：

events: ['mousemove', 'click'],
onHover: (event, chartElement) => {
  event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

和：

options: {
  plugins : {
    legend: {   
      labels: {
        onHover: function (e) {
          e.native.target.style.cursor = 'pointer';
        },
        onLeave: function (e) {
          e.native.target.style.cursor = 'default';
        }
      }
    }
  }
}

但没有运气。

图片：

总而言之，我希望光标的样式等于整个图表上的指针，而不仅仅是图片中的红点。（红点周围有黄色，是我希望光标看起来像指针的点的一个例子。）。

提前致谢！

Answer 1

在 CSS 中，您需要canvas:hover{cursor: pointer}. 当canvas:hover光标悬停在元素上时，将运行其中的代码。将cursor: pointer告诉光标变成一个指针。有关更多信息，请转到此处查看其他光标类型，此处查看悬停选择器。

或者，如果您没有 CSS 文件，您可以这样做：<canvas id="myChart" style="cursor: pointer"></canvas> . 这将做与上述相同的事情。