悬停在榆树（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 进行悬停（因此存在限制），它负责在鼠标悬停时应用样式并在鼠标移出时清除它。

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

我们可以在 Element.el

上监听这些事件

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

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

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

How to make text strikethrough when hovered in elm (elm-ui)?