                       (mapv (fn [layer]
                               (dom/g #js {:className (str (when (= :select tool) "selectable-group ")
                                                           (when (and (= :select tool) (:layer/ui-target layer))
-                                                            "interactive"))
+                                                            "interactive ")
+                                                          (when (contains? (om/get-state owner :hovered-eids)
+                                                                           (:db/id layer))
+                                                            "hover"))
                                           :key (:db/id layer)}
                                      ;; The order of selectable-layer and non-selectable-layer is important!
                                      ;; If the non-selectable-layer comes last in the DOM it render above the selectable-layer,

                                                   " Right-click on a shape's border to name it " (:layer/ui-target layer))))
                                 (svg-element selected-eids
                                              (assoc layer
                                                :onMouseDown #(do
                                                                (.stopPropagation %)
                                                                (cond


(defn svg-layers [{:keys [editing-eids selected-eid selected-eids tool]} owner]
  (reify
    om/IInitState
    (init-state [_]
      {:listener-key (.getNextUniqueId (.getInstance IdGenerator))
       :hovered-eids #{}})
    om/IDidMount
    (did-mount [_]
      (d/listen! (om/get-shared owner :db)
