diff --git a/src/layer/vector/Canvas.js b/src/layer/vector/Canvas.js
index 9445ff6a..b85bdeb8 100644
--- a/src/layer/vector/Canvas.js
+++ b/src/layer/vector/Canvas.js
@@ -200,17 +200,29 @@ L.Canvas = L.Renderer.extend({
 		if (!this._map || this._map._animatingZoom) { return; }
 
 		var point = this._map.mouseEventToLayerPoint(e);
+		var id;
 
 		// TODO don't do on each move event, throttle since it's expensive
-		for (var id in this._layers) {
-			this._handleHover(this._layers[id], e, point);
+		for (id in this._layers) {
+			this._handleMouseOut(this._layers[id], e, point);
+		}
+
+		for (id in this._layers) {
+			this._handleMouseHover(this._layers[id], e, point);
 		}
 	},
 
-	_handleHover: function (layer, e, point) {
-		if (!layer.options.interactive) { return; }
+	_handleMouseOut: function (layer, e, point) {
+		if (layer.options.interactive && layer._mouseInside && !layer._containsPoint(point)) {
+			// if we're leaving the layer, fire mouseout
+			L.DomUtil.removeClass(this._container, 'leaflet-interactive');
+			this._fireEvent(layer, e, 'mouseout');
+			layer._mouseInside = false;
+		}
+	},
 
-		if (layer._containsPoint(point)) {
+	_handleMouseHover: function (layer, e, point) {
+		if (layer.options.interactive && layer._containsPoint(point)) {
 			// if we just got inside the layer, fire mouseover
 			if (!layer._mouseInside) {
 				L.DomUtil.addClass(this._container, 'leaflet-interactive'); // change cursor
@@ -219,12 +231,6 @@ L.Canvas = L.Renderer.extend({
 			}
 			// fire mousemove
 			this._fireEvent(layer, e);
-
-		} else if (layer._mouseInside) {
-			// if we're leaving the layer, fire mouseout
-			L.DomUtil.removeClass(this._container, 'leaflet-interactive');
-			this._fireEvent(layer, e, 'mouseout');
-			layer._mouseInside = false;
 		}
 	},