将鼠标悬停在 elm (elm-ui) 中时如何使文本删除线？

Question

基本上我想在悬停时使文本删除线。这不容易与

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

就像它会

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

因为Font.strike是Attribute msgwhileBackground.color是类型Attr decorative msg

有没有人知道如何用类似的东西来实现描述的行为Font.strike？

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

Answer 1

就像您已经指出的那样，mouseOver需要一个Attr decorative msg. 它CSS用于悬停（因此存在限制），它负责在鼠标悬停时应用样式并在鼠标移开时清除它。

对于一般情况，我们必须使用Element.Events. 我们还需要在我们的Model. 然后我们可以Font.strike根据模型有条件地应用属性。

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

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

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

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