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.
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