html - 为什么悬停不能处理移动的物体？

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 确实很方便，但由于你重写了转换，你可以试试这个:

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

您将必须计算宽度高度并将每个行星按比例的一半重新定位，但它有效。

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