Changing GeoJSON feature draw order with Leaflet

I have county polygons in GeoJSON format. Obviously, some of the counties share an edge.

When a county is hovered over, the stroke and fill change to a red color.

The problem is that the stroke of some of the polygons is covered by the one next to it.

Is there a way to reorder the features so that the feature that is hovered over moves to the top?

I've seen that there's a bringToFront method, but that is for a layer, not a feature.

Any ideas?

Answer

You should really use the bringToFront method.

In Leaflet, everything is a layer (except controls), even when it is the representation of a GeoJSON feature. In the latter case, we are even talking about vector layers.

The bringToFront and bringToBack methods are specific to vector layers, so that you can re-order them within their SVG or Canvas container (whereas raster and HTML layers can get a CSS class with z-index for that purpose).

Demo: https://jsfiddle.net/3v7hd2vx/228/