Leafletjs Cursor when hovering over WMS Layer

Question

I am using Leafletjs. Currently its pretty straight forward, I have a streets view from open maps.

var streets = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    });

I also have a WMS layer that is coming from a geoserver. It has the standard getFeatureInfo and everything shows up correctly.

L.tileLayer.wms("GEOSERVERURL", {
            layers: 'layers',
            format: 'image/png'
            ,transparent: true
        }).addTo(map);

The wms layer is also clickable and I use getFeatureInfo to get the info for that layer. The issue is that the user doesn't know its clickable because the cursor never changes when they hover of the wms layer. My question is how do make the cursor change when hovering over the layer?

Has anyone implemented this feature before or have an idea to implement it? The only research I have stumbled across so far has using mouseover on the map and calling getFeatureInfo to tell if its over a layer. However, that seems like it would cause a lot of chatter just to identify cursor area.

EDIT: To clarify, I want the cursor to only change when its hovered over the wms layer that is populated. Although it technically gets applied to the whole map, it only has content on a part of it. Which kind of raises the question of 'Can I limit the wms layer to only the content area and then show a cursor?' Maybe a bounding area or something along those lines?

EDIT 2: Below is an example of what it looks like. The street map parts I want to keep the normal cursor but I want a pointer when hovering over the colored wms map parts.

Answer 1

Set an ID on the tileLayer's container and then use CSS to change the cursor:

Javascript:

var wms = L.tileLayer.wms("GEOSERVERURL", {
    layers: 'layers',
    format: 'image/png',
    transparent: true
}).addTo(map);

wms.getContainer().setAttribute('id', 'wmsContainer');

Stylesheet:

#wmsContainer {
    cursor: grab; /* or any other cursor: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */
}

Note: you need to do this after the layer is added to the map. Before you add it to the map the getContainer method will return undefined.

Edit after question edit and comments:

Unfortunatly that's not possible. At least not as far as i know. Because L.TileLayer.WMS is a layer of images, there is absolutely no way of deducting which tiles have features on them and which are transparent.

What you could do as a workaround is work out the boundaries of your object, use that to create a transparent polygon without stroke and put that over your WMS layer. Polygons are interactive thus you get the cursorchange included, plus as an extra bonus, you can do other fancy stuff like show the outline or something like that on mouseover. I've created a little demo from the WMS example you supplied in the comments.

http://plnkr.co/edit/1HGn6IUzdrn1N5KGazXQ?p=preview

Note that i'm using a GeoJSON layer with one feature instead of a polygon, because it was easier to find the outline of the US in GeoJSON format. But in your case a four point polygon would do the trick just as wel.

Hope that helps, let me know if something isn't clear.