css - 从父级旋转子元素：悬停

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