CSS: переместить элемент в состояние наведения, но сохранить позицию активной области

Question

Я пытаюсь создать эффект кнопки, которая «поднимается» со страницы при наведении.

Используя CSS, у меня есть элемент стиля блока <a>, который, когда парил , перемещается вверх и влево 5px , и тень остается позади:

a { 
    display: inline-block;
    position: relative;    }

a:hover {
    top: -5px; left: -5px;
    box-shadow: rgba(0,0,0,.2) 5px 5px 2px;    }

Проблема: Когда блок <a> отскакивает на 5 пикселей от курсора во время наведения, курсор больше фактически не зависает над блоком, а затем блок отскакивает назад, когда курсор перемещается только немного позже.

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

Я бы хотел избежать добавления лишних элементов контейнера в мой код, если это вообще возможно.

Answer 1

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

a { 
display: block;
position: relative; 
width:40px;
height:30px;
}

a:hover {
top: -5px; left: -5px;
box-shadow: rgba(0,0,0,.2) 5px 5px 2px; 
-webkit-transition-duration: .2s;
}

Answer 2

Вы изменили свойство положения в трее?исправлено, например:

a:hover {
 position: fixed;
}

Answer 3

Один из способов добиться этого - использовать лишний элемент (прозрачное изображение или родительский div большого размера). Когда пользователь наводит курсор на изображение, используя селектор потомков / дочерних элементов, вы просите дочерние элементы «прыгать». Это может быть возможно только с последними браузерами. Если вы смотрите на совместимость с разными браузерами, использование javascript может быть правильным подходом.