WHAT IT DOES

FTL is a tiny JavaScript plugin that allows your website to respond to :hover events faster than normally possible. On default settings, FTL will make your site visibly snappier. Crank it up to eleven and watch as buttons :hover hundreds of pixels away from the cursor in the vague direction its headed.

HOW IT WORKS

To figure out where your cursor is headed, FTL generates a precursor (aka the "ghost cursor") whereever it sees your mouse is headed. If this precursor hovers over an element, the .prehover class is added to the element. The cursor shown on this page is for demonstrative purposes only and is not part of the plugin.

HOW TO USE IT

At the core of FTL is the .prehover class. Anywhere you have :hover in your CSS, simply replace it with .prehover or append it to the existing CSS to have your element react to both selectors.

a:hover, a.prehover {
	background: hotpink;
}
				

FTL also fires JavaScript events when a hover event is foreseen. Listen for the prehover event for foreseen hovers, erphover for cancelled foresights, and precursormove to track the ghost cursor's position.

myElement.addEventListener('prehover', foreseenHoverFunc)
myElement.addEventListener('erphover', cancelledForsightFunc)
myElement.addEventListener('precursormove', ghostCursorMovedFunc)
				

DOWNLOAD IT

Download this file or copy this code into your script tag:

!function(){var e,r,n=r={x:0,y:0},o=Math,t=o.pow,i=function(e){return o.min(200,o.max(-200,e))},s=document,a=function(e,r,n){return e.dispatchEvent(new CustomEvent(r,{detail:n}))},d=function(){var o={x:i(8*(n.x-r.x)),y:i(8*(n.y-r.y))},d={x:n.x+o.x,y:n.y+o.y,d:t(t(o.x,2)+t(o.y,2),.5)};a(s,"precursormove",{x:d.x,y:d.y,d:d.d}),function(r){var n,o=s.elementFromPoint(r.x,r.y),t=n=[],i=e;if(!e||o&&o===e||(e.classList.remove("prehover"),a(e,"erphover")),o&&e!==o){for(;i;)t.push(i=i.parentNode);for(i=o;i;)n.push(i=i.parentNode);for(var d=0,v=t;d