Потеря наведения при перемещении мыши CSS

Итак, я новичок в HTML, CSS и всем таком, и я пытался изучить jQuery и JavaScript, но пока безуспешно. В любом случае, я хотел навести курсор мыши на одно место и запустить div в другом месте, поэтому я использовал код соседних братьев и сестер, но проблема в том, что как только событие было вызвано, и коробка, которую я хочу, находится там, если я перемещаю мышь, она запускает его снова, вместо того, чтобы оставаться на элементе 'hover', пока я не уберу мышь. Есть ли способ исправить это?

Это соседние родственные элементы часть CSS: 

.b:hover ~ .a {
  position:absolute;
  height:1000%;
  width:100px;
  margin-top:-1000px;
  margin-left:100px;
  background-color:#b6c9e7;
  z-index:1000;
  opacity:1;
  transition:  all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition:  all 0.4s ease-in-out 0s;
  -o-transition:  all 0.4s ease-in-out 0s;
  -webkit-animation-duration: 2s;
}​

Вот мой код: в JSFiddle

Помощь была бы очень признательна!

1 2
css hover siblings

1 ответ:

Ваш зиндекс выключен. Когда вы перемещаете мышь, вы на самом деле переворачиваете a, а не b, и поскольку именно b находится в состоянии наведения, вы изнемогаете раскат, который сбрасывает положение. установить за б и он будет работать как хотелось бы.

z-index:999;

Http://jsfiddle.net/2g2uY/

Zindex-это в основном номер стека, поэтому если что-то имеет более высокий zindex, это означает, что оно находится перед другим элементом. Это действительно вступает в игру только при наложении элементов, при использовании абсолютно и относительно расположенные элементы.

Кроме того, при использовании селектора :hover вам не нужно переопределять элементы, которые вы не изменяете. Все они наследуются; меняются только атрибуты, которые отличаются в состоянии наведения.

2