Почему бы не зависать с движущимися объектами?

Question

Я делаю солнечную систему в CSS, и вот мой код: http://jsfiddle.net/kAKdm/.

Однако, похоже, что :hover будет работать только с солнцем, которое является единственным элементом, который не движетсяс CSS-анимацией.

Кто-нибудь знает способ заставить :hover работать и с планетами?Я хочу сделать что-то подобное, но это, конечно, будет переопределено анимацией:

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

Заранее спасибо.

Answer 1

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/

Answer 2

По сути, если вы масштабируете планеты, которые вы изменяете, это width, height, top, left, border-radius свойства.

масштаб, конечно, удобен, но поскольку вы переопределяете преобразование, вы можете попробовать это:

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

Выпридется рассчитать высоту ширины и изменить положение каждой планеты на половину масштаба, но это работает.

http://jsfiddle.net/kAKdm/21/ - попробуйте навести курсор на Венеру.