cssclojureclojurescriptre-framehiccup

clojurescript / hiccup - inline css to set dispatch to a hover action

I'm trying to hover a text and change the :display of another text to none, in order to make it disappear. I've used :onMouseOver, but it does not work because it needs this.value I think. So, any idea for how I can do that? I require inline CSS in this case.

This is what I have:

[:p {:onMouseOver #(rf/dispatch [:events/hover-feedback])} "hello"]
[:p {:style {:display @(rf/subscribe [::subs/hover-feedback])}} "world"]

And in events file:

(rf/reg-event-db
  ::hover-feedback
  (fn [db]
    (assoc db :hover-feedback "none")))

In subs file:

(rf/reg-sub ::hover-feedback (fn [db] (get-in db [:hover-feedback]
Solution

  • I think you forgot one colon in the first :p dispatch. Try this:

    Views:

    [:p {:on-mouse-over #(rf/dispatch [::events/hover-feedback])}
             "hello"]
[:p {:style {:display @(rf/subscribe [::subs/hover-feedback])}}
             "world"]

    Events (without change):

    (re-frame/reg-event-db
  ::hover-feedback
  (fn [db]
      (assoc db :hover-feedback "none")))

    Subs (unnecessary get-in):

    (re-frame/reg-sub
  ::hover-feedback
  (fn [db]
      (:hover-feedback db)))