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如果不可能，我也会接受非解决方案。

标签： elmelm-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