CODEWITHSUNDEEP
cytoscape.js
user2909505
user2909505

Reputation: 81

How do I change cursor to pointer when mouse is over a node

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.

Upvotes: 8

Views: 3356

Answers (4)

Tim Abell
Tim Abell

Reputation: 11870

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

Upvotes: 2

Claudiu
Claudiu

Reputation: 61

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

Upvotes: 6

user1410117
user1410117

Reputation:

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

Upvotes: 2

maxkfranz
maxkfranz

Reputation: 12242

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.

Upvotes: 3

Related Questions