Вращать Детский Элемент От Родителя: Наведите

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); 
}