如何获取鼠标悬停元素对应的Dynamic Bool？将按钮触发改为悬停触发

要把点击触发改成鼠标悬停触发，核心是监听按钮的鼠标进入/离开事件，将这些事件转化为表示"是否处于悬停状态"的Dynamic Bool。下面是具体的修改思路和完整代码：

步骤拆解 #

• 不再直接用button函数（它仅返回点击事件），改用el创建按钮并获取其DOM元素引用，这样才能绑定鼠标事件。
• 用mouseEnter和mouseLeave函数分别捕获鼠标进入、离开按钮的事件。
• 通过holdDyn创建初始状态为False的Dynamic：当鼠标进入时更新为True，离开时更新为False。
• 最后用这个Dynamic控制方块样式，逻辑和原代码保持一致。

完整修改后的代码 #

import Reflex.Dom
import Data.Map (Map)
import qualified Data.Map as Map

main = mainWidget $ do 
  -- 创建按钮并获取它的DOM元素引用
  (buttonEl, _) <- el "button" $ text "Hover me to change color."
  -- 获取鼠标进入和离开按钮的事件
  let enterEv = mouseEnter buttonEl
      leaveEv = mouseLeave buttonEl
  -- 构建表示悬停状态的Dynamic Bool
  isHovered <- holdDyn False $ leftmost [True <$ enterEv, False <$ leaveEv]
  -- 将状态映射为样式属性
  styleDyn <- mapDyn style isHovered
  -- 渲染动态样式的方块
  elDynAttr "div" styleDyn blank

style :: Bool -> Map String String 
style b | b = "style" =: "height: 10ex; width: 10ex; background-color: #f00;" 
        | otherwise = "style" =: "height: 10ex; width: 10ex; background-color: #900;"

关键细节说明 #

• el "button"返回的元组中，第一个元素是按钮的DOM元素引用，我们用它来绑定鼠标事件。
• leftmost用来合并多个事件流：当enterEv触发时传入True，leaveEv触发时传入False，holdDyn会根据这些事件实时更新Dynamic的状态。
• 原代码里的(=:)是Map.singleton的语法糖，只要导入了Reflex.Dom相关模块就能直接使用，不用额外修改。

这样修改后，鼠标悬停按钮时方块会变为亮红色，离开时自动切回暗红色，完美替换原有的点击触发逻辑。

内容的提问来源于stack exchange，提问作者Ignat Insarov