:hover 的内联 CSS 声明 clojurescript 中没有渲染答案

【问题标题】：Inline CSS for :hover states no rendering in clojurescript:hover 的内联 CSS 声明 clojurescript 中没有渲染
【发布时间】：2019-10-11 03:54:12
【问题描述】：

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

我正在尝试为某些 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"}

                                                       }}]

              ]]
    ```

【问题讨论】：

标签： clojurescript

【解决方案1】：

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

典型的 CSS-in-JS 库生成一个“虚拟”类名，而不是将实际样式应用于元素，只需应用类名并在运行时创建匹配的 CSS 选择器。

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

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

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

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

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

【讨论】：

【解决方案2】：

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

您可以拥有一个由garden 生成的分离的 CSS 文件，具有伪类、媒体查询等的全部功能。

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

【讨论】：