Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the cursor on hover in openlayers 3?

Tags:

I managed to add interactivity to a feature layer added from a remote GeoJSON resource. When I click on a feature I get its ID, fire an AJAX request and display some relevant info about the feature, on the page outside of the map area.

I used a Select interaction.

I would like to make it even clearer to the user that he can click on the features on the map. Is there any way I can change the mouse cursor to "cursor" of "hand" when the mouse hovers a feature contained in a ol.layer.Vector ?

I couldn't find anything in the doc, on this site or by googling.

like image 480
Pierre Henry Avatar asked Sep 24 '14 16:09

Pierre Henry


People also ask

How do I change the hover arrow?

How to Change the Cursor of Hyperlink while Hovering. The default cursor for a hyperlink is "pointer". To change it, you need to specify the cursor type for your <a> element with the CSS :hover selector. In our example, we style only the "link" class.

How do I change the cursor when I hover over the button?

Answer: Use the CSS cursor Property You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink.

What is hover cursor?

: to position (a computer cursor) over something (such as an image or icon) without selecting it Many in the class hovered their cursors over words and icons for long periods before committing to clicking their mouse.— Kelly Heyboer.


1 Answers

It can be done as well without jQuery:

map.on("pointermove", function (evt) {     var hit = this.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {         return true;     });      if (hit) {         this.getTargetElement().style.cursor = 'pointer';     } else {         this.getTargetElement().style.cursor = '';     } }); 
like image 185
Pablo Avatar answered Oct 02 '22 15:10

Pablo