Home

!!! Alert !!!

this library is still not done, if you want to use it, please check in every day for updates, thanks!

How this works?

this library affects default prototypes of Element, this prototype is changing default look of cursor by hiding it and replacing with any other you want...
here is some example usage:

document.querySelector('.your_class').over();

this example will load default library setup
you can change everything in this setup... find out how to cahnge it by scrolling down

Content

string setup html content of cursor

document.querySelector('.test').over({
    content: '<div class=\'my-cursor\'>Lorem Ipsum</div>'
})

(default value is content: '<div class=\'circle-cursor\'></div>')

Attributes

string id - id of wrapper that will be holding cursor
array class - classes of wrapper that will be holding cursor

document.querySelector('.test').over({
    attributes: {
        id: 'special-cursor',
        classList: ['first-class', 'second-class']
    }
})

(default values are id: 'custom-cursor', classList: ['overjs__cursor', 'overjs__cursor-default'])

Callbacks

onEnter

function call any function while entering target element

document.querySelector('.test').over({
    onEnter: function(self, event) {
        .....
    }
})

onMove

function call any function while moving mouse over target element

document.querySelector('.test').over({
    onMove: function(self, event) {
        .....
    }
})

onOut

function call any function while moving mouse out of target element

document.querySelector('.test').over({
    onOut: function(self, event) {
        .....
    }
})

Ignoring

ignore

array list of elements which will not be affected by changing cursor

document.querySelector('.test').over({
    ignore: [
        document.querySelector('.child1'),
        document.querySelector('.child2')
    ]
})

onIgnored

function call any function while hovering ignored child

document.querySelector('.test').over({
    ignore: [document.querySelector('.child')],
    onIgnored: function(self, target, event) {
        .....
    }
})

Changing look

whileMoving

array list of classes you want to append into main wrapper while mouse is moving

document.querySelector('.test').over({
    whileMoving: ['another-class']
})

(default value is whileMoving: ['overjs__cursor-moving'])

timeoutWhileMoving

integer timeout to remove classes added while moving in milliseconds
example: i want to have .3s transition on my added class, so if class is removed too early, animation will not look so good... by setting timeout attribute to 300, my animation will complete and then remove class

document.querySelector('.test').over({
    whileMoving: ['another-class'],
    timeoutWhileMoving: 300,
})

(default value is timeoutWhileMoving: 400)

Actions

onClick

function call custom function when clicked on target element

document.querySelector('.test').over({
    onClick: function(self, event) {
        .....
    }
})

onContextMenu || onRightClick

function call custom function when right clicking on target element

document.querySelector('.test').over({
    onRightClick: function(self, event) {
        .....
    }
})

contextMenuPreventDefault || rightClickPreventDefault

boolean addition to onContextMenu action, enabling or disabling default action on right click

document.querySelector('.test').over({
    rightClickPreventDefault: false,
    onRightClick: function(self, event) {
        .....
    }
})

(default value is rightClickPreventDefault: true)

TODO?

i am doing my best to create this library as customizable as i can... if you have any ideas how to improve my work, please create pull requests
you will be added to CONTRIBUTIONS.md file of this project, thank you!