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.

Yocum

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');
                    });

Designate

This works but is a bit unreliable, if mouseout event fails to fire (happens easily in my quick test) then the cursor stays as a hand over the rest of your webpage until you go over another node and successfully get the end to fire when leaving the node. – Overexpose

Answer 2

Due to technical issues with the cursor across browsers and the fact that the cursor does not apply at all on touch devices, Cy.js no longer supports the cursor property.

Repulsion

Terrific! We need this. – Wray

Answer 3

Put a helper class on the wrapper DOM element or on the canvas itself using cytoscape events:

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

Then in css: .cysWrapper.mouseover { cursor: pointer; }

Cykana

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 is a div containing the cytoscape.js diagram.

cy is the cytoscape js object

This code is inside $(document).ready(function() {...} along with the declaration of cy.

---

Thanks to the other answers for inspiration. I couldn't quite get them to behave so this the hybrid that I ended up with

Overexpose