cytoscape.js - How do I change cursor to pointer when mouse is over a node

Question

I am new to Cytoscape.js. I've managed to create a network. I'd like to change mouse cursor to pointer when mouse is over a node. Based on what I read, I should use the following code:

style: cytoscape.stylesheet()
    .selector('node')
      .css({
          'content': 'data(name)',
          'text-valign': 'center',
          'color': 'white',
          'text-outline-width': 2,
          'text-outline-color': '#888',          
          'cursor': 'pointer'
       })

//other code omitted

To my surprise, the cursor did not change. It stayed the same default cursor. What did I miss? Please help. Thanks.

Answer 1

This worked for me :

cy.on('mouseover', 'node', function (evt) {                            
                        $('html,body').css('cursor', 'pointer');
                    } );

cy.on('mouseout', 'node', function (evt) {
                        $('html,body').css('cursor', 'default');
                    });

Answer 2

由于跨浏览器光标的技术问题以及光标根本不适用于触摸设备的事实，Cy.js 不再支持该cursor属性。

Answer 3

cy.on('mouseover', 'node', function(e){
    $('#diagram-wrapper').css('cursor', 'pointer');
});
cy.on('mouseout', 'node', function(e){
    $('#diagram-wrapper').css('cursor', 'default');
});

diagram-wrapper是一个包含 cytoscape.js 图的 div。

cy是 cytoscape js 对象

此代码$(document).ready(function() {...}与cy.

---

感谢其他答案的启发。我不能完全让他们表现出来，所以这是我最终得到的混合体

Answer 4

使用 cytoscape 事件在包装 DOM 元素或画布本身上放置一个辅助类：

cys.on('mouseover', 'node', () => $(targetElement).addClass('mouseover'));
cys.on('mouseout', 'node', () => $(targetElement).removeClass('mouseover'));

然后在css中： .cysWrapper.mouseover { cursor: pointer; }