Поворот дочернего элемента от родителя: наведите курсор

Question

Просто маленький элемент, который я не могу понять, и я надеюсь, что коллективные знания здесь могут указать мне правильное направление.

Я бы хотел повернуть изображение внутри div, когда пользователь наводит курсор на div. Пример кода можно найти здесь: http://jsfiddle.net/mashby/eCzmj/

Прямо сейчас анимация запускается при наведении курсора на само изображение, а не на весь div.

Не знаю, возможно ли сделать то, что я хочу, но заранее благодарю за любые подтверждения или предложения!

Answer 1

Кажется, проблема с вашим CSS

Вы используете #animate img:hover, что означает, что вы будете применять стили к img при его наведении.

Попробуйте вместо #animate:hover img применить стили к элементу img при наведении родительского элемента (#animate).

Answer 2

Это возможно. Общая идея:

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

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