Html 在悬停div上旋转图像

我试图确保当我悬停父对象时，div中的

应该旋转360度（例如，悬停文本，或者中间的空格也应该旋转图像）

这是我的JSFIDLE-

---

我认为这可能是非常简单的事情，但是我似乎不知道要改变什么才能使这个“简单”效果起作用。

只需将css更改为：

div:hover .rotate {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

而不是：

.rotate {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

希望这有帮助

---

第一种方法：当div悬停时，其所有直接的

子标记都会旋转

div:hover > img {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

第二种方法：使用类
旋转直接子对象
。旋转
（更具体）

第三种方法：在父div悬停时旋转。带有classname
.rotate的所有子级
标记将旋转（与第二个标记相比不太具体）

将父div悬停时，直接的
子div将旋转360度

Fiddle-
有很多方法可以做到这一点，比如JQuery，但是对于CSS，只需将CSS更改为

div:hover .rotate {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

您应该使用嵌套选择器

.onethirdcolumn:hover .rotate {/*add css effects here*/}

此CSS匹配任何具有类“rotate”的元素，这些元素在悬停时是具有“onethirdcolumn”的元素的子元素。因此，实际上，当父类“onethirdcolumn”悬停时，设置“rotate”类的样式

希望这有帮助。
要使链接正常工作，只需将
http://
放在它前面。如果不在此处发布一些代码，您就无法发布JSFIDLE链接。我知道，我尝试过，但我不断地重复相同的错误。顺便说一句，您需要360。。这将是相同的图像您的代码在我看来很好，您正在旋转
。当它被悬停时，您将旋转赋予
img
。
div:hover .rotate {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.onethirdcolumn:hover .rotate {/*add css effects here*/}