画像の上にマウスオーバーしたときに文字列を動かしたり、縮めたりする実装をしていたときに必要になった.

こんなことできるんですね….

やる方法は以下

parent: hover > child {

のように書けばいい.

そうするとparent要素のhoverがされたときにchildに適用される.

他にポイントとしては、

• transition:all 1sとかは当然アニメーションされる child側の設定に依存(parent無関係)

とか?

サンプルコード

上記を実行するとこんな感じになります.

hover前

hover後