内联 CSS for :hover 声明在 clojurescript 中没有渲染

Question

我确定我犯了一个简单而愚蠢的错误，所以请宽恕。

我正在尝试为某些 clojurescript 元素编写内联 CSS，并且可以编译以下代码，但不会呈现预期的悬停颜色。

有没有人看出哪里出了问题？

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

编辑：

我也试过这种方法，同样没有成功：

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

                                                       }}]

              ]]
    ```

Answer 1

像:hover这样的伪class不能通过内联样式应用。它们只能应用于 CSS 选择器本身，但由于您没有使用命名的 class，因此您也不能应用伪 classes。

典型的 CSS-in-JS 库生成了 "virtual" class 名称，而不是将实际样式应用于元素，只需应用 class 名称和在运行时创建匹配的 CSS 选择器。

您要么必须使用手动创建的样式创建外部 CSS

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

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

使用一些在运行时为您执行此操作的库（例如 garden）或通过为 onmouseenter [=14= 附加自定义 JS 事件处理程序来模仿相同的 "hover" 行为] 并在运行时操纵实际样式。

内联样式在它们可以实现的方面相当有限（例如，也没有媒体查询）所以你想在大多数情况下坚持使用实际的 CSS。直接或通过在运行时生成它的 JS。

Answer 2

确实在内联 CSS 中不支持伪类：CSS Pseudo-classes with inline styles

您可以让 garden 生成一个单独的 CSS 文件，利用伪类、媒体查询等的全部功能

或者，您可以寻找受 JS 趋势 CSS 启发的支持您需求的 clojurescript 库，例如 Herb：http://herb.roosta.sh/#pseudo

内联 CSS for :hover 声明在 clojurescript 中没有渲染

Inline CSS for :hover states no rendering in clojurescript

clojurescript