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

时间:2011-04-22 13:55:36

标签: html css animation webkit hover

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

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

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

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

提前致谢。

2 个答案:

答案 0 :(得分:0)

基本上如果要缩放行星,则需要更改它的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/ - 尝试悬停金星。

答案 1 :(得分:0)

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/