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

Question

这个问题已经有答案了:

Chart.js how to show cursor pointer for labels & legends in line chart (11 个回答)

已关闭 去年。

我怎样才能制作我的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会告诉光标变成一个指针。欲了解更多信息，请访问here for other cursor types和 here for hover selector .

或者，如果您没有 CSS 文件，您可以这样做:<canvas id="myChart" style="cursor: pointer"></canvas> 。这将执行与上面解释的相同的操作。