为什么不悬停使用移动物体？

Question

我正在用CSS制作太阳能系统，这是我的代码：http://jsfiddle.net/kAKdm/。

然而，似乎:hover只适用于太阳，而太阳是唯一不会随CSS动画移动的物品。

有没有人知道如何使:hover与行星一起工作？我想做这样的事情，但它当然会被动画覆盖：

#planets > div:hover {
  -webkit-transform: scale(1.2);
}

提前致谢。

Answer 1

基本上如果要缩放行星，则需要更改它的width, height, top, left, border-radius属性。

scale sure很方便但是由于你覆盖了变换，你可以试试这个：

#planet-venus:hover {
width:20px;
height:20px;
left: 396px;
top: 290px; 
border-radius:10px;
}

你必须计算宽度高度并将每个行星重新定位一半的尺度，但是它可以工作。

http://jsfiddle.net/kAKdm/21/ - 尝试悬停金星。

Answer 2

Chrome不接受div:hover，它只接受img:hover。因此，请使用：

而不是#planets > div:hover

#planets > div img:hover

有关详细信息，请访问：http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/