css - 親から子要素を回転:ホバー

Question

私が理解できないように見えるほんの小さな要素であり、ここでの集合的な知識が私を正しい方向に向けてくれることを願っています.

ユーザーがdivにカーソルを合わせたときに、div内の画像を回転させたいと思います。コードの例は、http: //jsfiddle.net/mashby/eCzmj/にあります。

現在、アニメーションは、div 全体ではなく、画像自体にカーソルを合わせるとトリガーされます。

私がやりたいことを実行できるかどうかはわかりませんが、事前に確認や提案をありがとうございます!

Answer 1

CSSに問題があるようです

これは、ホバーしたときに#animate img:hoverスタイルを適用することを意味します。img

Try instead #animate:hover img to apply the styles to the img element when the parent (#animate) is hovered.

Answer 2

可能です。一般的なアイデア：

#btnAgendaSettings img, #btnMinutesSettings img {
    transform: inherit;
}

.button-gray:hover, .button-gray:focus {
    transform: rotate(360deg);
}