Properties that are useful for `hover` or `focus`

[mdgriffith]

Currently the following are hoverable:

• font color
• background color
• border color
• element scale

And focus styles can be set globally using layoutWith, and supports:

• background color
• shadow
• border color

But there are more that would be nice to use for hover or focus!

Leave a comment to propose a style property. We don't want to support things that probably don't make sense like font family, or things that are technically not possible like event handlers :)

[norpan]

I would really like a button that changes color on click, so I would like to capture the :active pseudoclass with functions like Background.mousePressColor or simliar

I know this can be achieved by capturing the onmousedown and ontouchstart events on buttons and keeping track of this in the model, but then you'd have to do it for every button, which makes the model more complicated.

If you implement this, :active need to come after any :hover in the css so that it takes precedence.

Also, the pseudoclasses are the only css that you can't access through Element.attribute <| Html.style so if it's possible to have an "escape hatch" for them too, it would be great.

[kuon]

I'd like opacity to be hoverable.

[akoppela]

underline should be hoverable. Should work both directions.

[kuon]

transform should be hoverable

[kuon]

I just realized a new use case. I have a table (tabular data), and in the right most column, I have action buttons. When I hover the button, I'd like to expand them and display a text description alongside the icon.

I don't want to use messages and event handlers, because it would require a lot of work and complication for just a simple effect.

https://codepen.io/anon/pen/bvmpYB

[jpp46]

I would like to be able to change the background, including color and image properties. Also I would personally like to have (inFront, onLeft, ... etc)