如何在elm (elm-ui)中悬停时设置文本删除线？

Question

基本上，我希望在悬停时使文本带有删除线。这并不容易与

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

就像它在

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

因为Font.strike是Attribute msg，而Background.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