为什么悬停不适用于移动的物体？

Question

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

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

有谁知道如何使 :hover 也适用于行星？我想做这样的事情，但它当然会被动画覆盖：

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

提前致谢。

Answer 1

基本上，如果你缩放行星，你就会改变它的宽度、高度、顶部、左侧、边框半径属性。

缩放确实很方便，但由于您覆盖了变换，您可以尝试以下操作：

#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

有关更多详细信息，请访问：