Inline CSS for :hover states no rendering in clojurescript

I'm sure I'm making a simple and idiotic error, so please have mercy.

I am trying to write inline CSS for some clojurescript elements and the following code compiles, but the expected hover color does not render.

Does anyone see what is wrong?

[:div  
[bp/icon 
{:icon "database" 
:style {:color "#555555" :padding "10px" :background-color "rgb(250, 250, 250)" :hover "rgb(255, 63, 0)"
}}]]

EDIT:

I've also tried this approach, also with no success:

            [:div {:class "bp3-button-group"}
             [:div  [bp/icon {:icon "database" :style {:color "#555555" :padding "10px" :background-color "rgb(250, 250, 250)" :&:hover {:background-color "#000"}

                                                       }}]

              ]]
    ```

Solution

Pseudo-classes like :hover cannot be applied via inline styles. They can only be applied to CSS selectors themselves but since you are not using a named class you can't apply pseudo-classes either.

The typical CSS-in-JS libraries generated a "virtual" classname and instead of applying the actual styles to the element just apply the classname and create a matching CSS selector at runtime.

You will either have to create an external CSS with the styles created manually

// some.css
.some-class { ... }
.some-class:hover { ... }

// your.cljs
[:bp/icon {:icon "database" :class "some-class} ...]

use some library that does this for you at runtime (eg. garden) or immitate the same "hover" behavior by attaching custom JS event handlers for onmouseenter onmouseout and manipulating actual styles at runtime.

Inline styles are fairly limited in what they can achieve (eg. no media-queries either) so you want to stick with actual CSS for the most part. Either directly or via JS that generates it at runtime.