elm - 如何在 elm (elm-ui) 中悬停时使文本带有删除线？

基本上我想在悬停时使文本带有删除线。这并不容易使用

el [ mouseOver [Font.strike] ] (text "some text")

就像这样

el [ mouseOver [Background.color someColor] ] (text "some other text")

因为Font.strike是一个Attribute msg，而Background.color是Attr装饰性msg类型

有人知道如何使用 Font.strike 之类的东西来实现所描述的行为吗？

如果不可能的话，我也会接受非 elm-ui 解决方案。

最佳答案

就像您已经指出的那样，mouseOver 需要 Attr 装饰性消息。它使用 CSS 进行悬停(因此有限制)，它负责在鼠标悬停时应用样式并在鼠标移开时清除它。

对于一般情况，我们必须使用 Element.Events 自己检测鼠标悬停/移出。我们还需要在模型中跟踪此状态。然后我们可以根据模型有条件地应用 Font.strike 属性。

我们可以在 Element.el 上监听这些事件

Events.onMouseEnter Enter
  :: Events.onMouseLeave Leave
  :: style

，其中 style 是 [ Font.strike ] 或 []，具体取决于型号。

完整代码和工作演示在这里:https://ellie-app.com/bNjP6CbGrLJa1

关于elm - 如何在 elm (elm-ui) 中悬停时使文本带有删除线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65277833/