Различные эффекты зависания при зависании: слева, справа, сверху, снизу

Question

Я думаю, у меня может быть очень сложный вопрос. Я делаю свой портфолио веб-сайта, и теперь у меня есть вопрос о влиянии зависания для моего предмета портфолио. JSFiddle

<div class="item"> 
    <div class="item-hover"> 

    </div> 
</div> 

В скрипку при наведении элемента парения ДИВ приходит сверху.

Теперь, мой вопрос: я хочу, чтобы наведите указатель на сторону сбоку, чтобы вы наведете div.
Итак, если вы наведете div слева, то слева появится указатель-указатель. И если вы наведете div справа, справа появится указатель-указатель. И то же самое для верхнего и нижнего.

Я надеюсь, что кто-то может помочь мне с моей проблемой!

здоровается, Боаз Poolman

Answer 1

По сути, то, что вам нужно сделать, это следующее;

1. Создать родительский контейнер для элемента
2. Создать внутренний элемент, который будет парение эффекта с шириной: 0 и высота: 0;
3. Проверьте направление мыши
4. на основе направления, добавить класс внутреннего элемента, который изменяет это парение эффект (ширину х, высоту у)

Чтобы захватить направление мышь, когда пользователь сначала впадает в ваш элемент, вам нужно зафиксировать его положение. После очень короткого промежутка времени снова зафиксируйте позицию. Сравните эти две позиции, и вы сможете получить направление, из которого мышь ввела элемент. Например;

Если начальная позиция мыши для элемента был x: 5 и y: 10 и новое положение x: 20 и y: 10, вы можете экстраполировать, что мышь перемещается в rightward направлении.

Вот учебник, который поможет вам узнать, что вам нужно знать;

http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

А вот демо;

http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/