Change cursor type on OnShapeMouseEnter

[David]

I am trying to change cursor type to 'pointer' when hover over shape.

Any recommendations?

[Tsvetomir]

Hi David,

You can change the visual appearance of the cursor by applying CSS to the specific shape.

I have used the Map - Shapes Layer demo as a base for modifying the cursor on hover over a circle. I have accessed the shape using the following CSS Selector: 

.RadMap .k-layer circle{
    cursor:pointer;
}

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post. 

To get a better understanding on how to access specific elements on page and apply styling, the following articles may be very helpful:

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

Regards,
Tsvetomir
Progress Telerik

[David]

Excellent!

Your post pointed me to solve it the following way:

 .RadMap .k-layer g {
            cursor:pointer;
        }

Thank you

 

[Tsvetomir]

Hi David,

I would like to bring to your attention another possible approach. It involves using client-side events and JavaScript functions.

In the ClientEvents tag of the RadMap control there are two events you can subscribe to: OnShapeMouseEnter and OnShapeMouseLeave and use JavaScript to change the appearance of the cursor.

<ClientEvents OnShapeMouseEnter="shapeMouseEnter" OnShapeMouseLeave="shapeMouseLeave" . . . />

And the JavaScript functions:

  shapeMouseEnter: function(evt) {
    evt.originalEvent.target.style.cursor = "hand";
  },
  shapeMouseLeave: function(evt){
   evt.originalEvent.target.style.cursor = "cursor";
  }

Regards,
Tsvetomir
Progress Telerik

[David]

Thank you Tsvetomir

I will keep this one in mind as well

[Tsvetomir]

Hi David,

We are glad to hear that you have managed to resolve the issue. 

Should you need further assistance, do not hesitate to contact us.

Regards,
Tsvetomir
Progress Telerik