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

Question

Basically I want to make the text strikethrough when hovered. This doesn't work easily with

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

as it would with

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

because Font.strike is a Attribute msg whereas Background.color is of type Attr decorative msg

Does anyone konw how to achieve described behavior with something like Font.strike?

I would also accept non elm-ui solutions if not possible otherwise.

[`Html.Attributes.map`](https://package.elm-lang.org/packages/elm/html/latest/Html-Attributes#map) could be used for. — Akihito KIRISAKI, Dec 13 '20 at 16:52

score 5 · Accepted Answer · answered Dec 13 '20 at 17:15

Like you already pointed out, mouseOver requires a Attr decorative msg. It uses CSS for the hover (hence the limitations), which takes care of applying the style on mouse over and clears it on mouse out.

For the general case, we have to detect mouse over/out ourselves, using Element.Events. We also need to keep track of this state in our Model. Then we can apply the Font.strike attribute conditionally depending on the model.

We can listen for these events on an Element.el

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

, where style is either [ Font.strike ] or [], depending on the model.

Full code and working demo here: https://ellie-app.com/bNjP6CbGrLJa1

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

1 Answers1