Html 为什么赢了'；t悬停处理移动的对象？

我正在用CSS制作一个太阳系，下面是我的代码：

然而，

：hover

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

有人知道一种方法可以让悬停在行星上工作吗？我想这样做，但它当然会被动画覆盖：

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

---

提前感谢。

基本上如果你正在缩放行星，你正在更改它的

宽度、高度、顶部、左侧、边界半径属性

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

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

你必须计算出行星的宽度和高度，并将每颗行星的位置调整到原来的一半，但这是可行的

-尝试悬停维纳斯。
Chrome不接受
div:hover
，它只接受
img:hover
。因此，不要使用
#planets>div:hover
，而是使用：

#planets > div img:hover

有关更多详细信息，请访问：
要明确说明，
：hover
工作正常。如果你实现
#planets>div:hover{background:orange！important；}
你会发现任何行星的背景在你悬停时都会变成橙色。不起作用的是第二个
-webkit变换
，因为动画已经有一个变换生效（并且不断变化）。问题一定出在-webkit变换：缩放（1.2）；因为如果您尝试更改其他属性：hover可以工作。