Question

我是Cytoscape.js的新手。我成功创建了一个网络。当鼠标在节点上时，我想将鼠标光标更改为指针。根据我的阅读，我应该使用以下代码：

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

令我惊讶的是，光标没有改变。它保持相同的默认光标。我错过了什么？请帮忙。感谢。

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

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

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

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

Answer 3

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

Answer 4

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内部。

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

当鼠标悬停在节点上时，如何将光标更改为指针

4 个答案: