JQPlot - 如何在鼠标悬停在JQPlot的柱状图上时将光标改为指针？

Question

当鼠标悬停在JQPlot的条形图上时，我希望将光标更改为“指针”。

我尝试在CSS中进行更改。但是它没有起作用。请帮助我。

- Manish

Answer 1

你需要像你尝试过的那样使用CSS进行修改。 你可能没有将CSS更改应用于正确的元素，你需要将其应用于.jqplot-event-canvas：

$('#chart1').on('jqplotDataHighlight', function () {
   $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
});

请参考这里的工作示例：链接 修改：根据sdespont的评论更新了代码。

注：正如Lukas Jelinek所写，当取消突出显示数据时，您可以重新定义默认指针。

$('#chart1').on('jqplotDataUnhighlight', function() {
    $('.jqplot-event-canvas').css('cursor', 'auto');
});

- AnthonyLeGovic

---

很好的回答，但使用.on()代替已被弃用的.bind()。 - sdespont

请注意，对于折线图，如果不将highlightMouseOver设置为true，则此解决方案无法正常工作。 - carruthd

Answer 2

如AnthonyLeGovic所写，使用以下命令进行绑定：

$('#chart1').on('jqplotDataHighlight', function () {
   $('.jqplot-event-canvas').css( 'cursor', 'pointer' );
});

但不要忘记解除绑定，以便在移出时设置正常的光标：

$('#chart1').on('jqplotDataUnhighlight', function() {
    $('.jqplot-event-canvas').css('cursor', 'auto');
});

- Lukas Jelinek

Answer 3

感谢你的回答。

我们也可以通过这种方式来实现：

cursor: { style: 'pointer', show: true, showTooltip: false }

但是我希望当光标悬停在条形图上时，只在条形图上显示“指针”而不是整个图表区域。

- Manish