在悬停div上旋转图像

Question

我试图确保当我悬停父<div>时，div中的<img>应该旋转360度（例如，将文本悬停在其间，或者中间的空格应该将图像旋转为好）

这是我的JSFiddle - http://jsfiddle.net/FmLbd/

我认为这可能是非常简单的事情，但我似乎无法弄清楚要改变什么才能使这种“简单”的效果发挥作用。

Answer 1

只需将您的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);
}

希望这有帮助！

JSFiddle Example

Answer 2

你应该使用嵌套选择器......

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

这个CSS匹配任何带有'rotate'类的元素，它们是悬停时带有'onethirdcolumn'的元素的子元素。因此，实际上，当“旋转”类的父级“onethirdcolumn”类被悬停时，将其设置为样式。

希望这有帮助。

Answer 3

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

}

2方法：用类.rotate（更具特异性）

旋转直接子img

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

}

第三种方法：当父div悬停时旋转。具有类名.rotate的子子img标签将旋转（与第二次相比较不具体）

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

}

当你悬停父div时，你的直接img孩子将旋转到360度

check here

Answer 4

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

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