Inline CSS for :hover states no rendering in clojurescript

Question

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"}

                                                       }}]

              ]]
    ```

score 1 · Accepted Answer · answered Oct 11 '19 at 09:38

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.

score 1 · Answer 2 · answered Oct 11 '19 at 10:06

Indeed pseudo classes are not supported in inlined CSS: CSS Pseudo-classes with inline styles

You can have a separated CSS file generated by garden with the full power of pseudo classes, media-queries, etc.

Or, you can look for a clojurescript library inspired from the CSS in JS trend that support your needs, like Herb: http://herb.roosta.sh/#pseudo

Inline CSS for :hover states no rendering in clojurescript

2 Answers2