inline style で :hover を再現した
CSS in JS(Elm)方式で、:hoverが出来ない問題を解決した。
ElmだけどJavaScriptでもたぶん出来る。
使い方
通常、次のように書いている部分を
li [] [ text "Hello" ]
次のように書く。
hover [("background", "#456")] li [] [ text "Hello" ]
すると、ホバー時のみ追加のスタイルが適用される。
仕組み
onmouseenterとonmouseleaveの２属性にスクリプトを自動的に突っ込む。
onmouseenter時に、元々DOMに付与されていたスタイルをdata-hover-style-nameに退避して、ホバー時のスタイルを適用する（キーはキャメルケースに変換する）。onmouseleave時に退避していたスタイルを元に戻す。自分の要素しかいじっていないので、Virtual DOM的にも問題ない。
詳しい実装はソースで。
気付き
onmouseenterとonmouseleaveイベントはマウスが動いたときには発火するんだけど、要素の側が動いてマウスと重なったりする場合に発火されないことに気付いた。詰んだと思ったんだけど、調べてみたら実は:hoverも同じ挙動をしていた問題なし。
