内联CSS :hover状态在clojurescript中不呈现

在ClojureScript中使用内联CSS的:hover状态时，可能会遇到不呈现的问题。这通常是由于浏览器的渲染机制和JavaScript的执行环境导致的。以下是一些基础概念和相关解决方案：

基础概念

内联CSS: 直接在HTML元素的style属性中定义CSS样式。
:hover状态: CSS伪类，用于定义鼠标悬停在元素上时的样式。
ClojureScript: 一种将Clojure语言编译成JavaScript的语言，常用于前端开发。

可能的原因

JavaScript执行时机: ClojureScript生成的JavaScript代码可能在DOM完全加载之前执行，导致:hover状态无法正确绑定。
浏览器渲染机制: 某些浏览器可能对内联样式的:hover状态处理不当，尤其是在动态生成的元素上。

解决方案

方案一：使用外部CSS文件

将CSS样式定义在外部文件中，并通过<link>标签引入。这样可以确保样式在DOM加载完成后正确应用。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="my-element">Hover over me</div>
    <script src="app.js"></script>
</body>
</html>

/* styles.css */
#my-element:hover {
    background-color: yellow;
}

方案二：使用JavaScript动态添加样式

在ClojureScript中使用JavaScript动态添加:hover状态的样式。

(ns my-app.core
  (:require [goog.dom :as dom]
            [goog.style :as style]))

(defn add-hover-effect []
  (let [element (dom/getElement "my-element")]
    (style/setStyle element "backgroundColor" "yellow")
    (dom/listen element "mouseout" #(style/setStyle element "backgroundColor" ""))))

(defn ^:export init []
  (add-hover-effect))

方案三：使用CSS-in-JS库

使用CSS-in-JS库（如styled-components）来管理样式，这样可以更好地与JavaScript代码集成。

(ns my-app.core
  (:require [my-app.styles :as styles]))

(defn ^:export init []
  (let [element (dom/createDom "div" {"id" "my-element"} "Hover over me")]
    (dom/appendChild (dom/getBody) element)
    (styles/add-hover-effect element)))

// styles.js
import styled from 'styled-components';

const StyledDiv = styled.div`
  &:hover {
    background-color: yellow;
  }
`;

export function addHoverEffect(element) {
  const styledElement = document.createElement('div');
  styledElement.innerHTML = element.innerHTML;
  element.parentNode.replaceChild(styledElement, element);
}