从父级旋转子元素：悬停

Question

只是一个我似乎无法弄清楚的小元素，我希望这里的集体知识可以为我指明正确的方向。

当用户将鼠标悬停在 div 上时，我想旋转 div 内的图像。可以在此处找到代码示例：http://jsfiddle.net/mashby/eCzmj/

现在，动画是通过将鼠标悬停在图像本身而不是整个 div 上来触发的。

不知道是否可以做我想做的事，但提前感谢任何确认或建议！

Answer 1

您的 CSS 似乎有问题

您正在使用#animate img:hover，这意味着您将在img 悬停时将样式应用于它。

尝试在父(#animate) 悬停时将样式应用到img 元素，而不是#animate:hover img。

Answer 2

这是可能的。总体思路：

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

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