Detect Mouse Direction In jQuery - mouse-direction

File Size: 3.44 KB
Views Total: 3233
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Detect Mouse Direction In jQuery - mouse-direction

Yet another mouse direction detection plugin for jQuery that detects the current mousemove direction (up, down, left, right, top-left, top-right, bottom-left, and bottom-right) and triggers custom events as you move mouse over a specific container.

See also:

How to use it:

1. Load the main JavaScript jquery.mousedirection.js after loading jQuery JavaScript library.

<script src="" 
<script src="jquery.mousedirection.js"></script>

2. Initialize the jQuery mouse-direction plugin.

$(function () {

3. Bind the mousedirection event to a specific container.

<div class="container">
  Move your mouse over this box
$(function () {
  $(".container").on("mousedirection", function (e) {
    $(this).html("Mouse Direction: <b>"+e.direction+"</b>");

This awesome jQuery plugin is developed by hasinhayder. For more Advanced Usages, please check the demo page or visit the official website.