Instantly share code, notes, and snippets.

What would you like to do?
Real Hover that excludes touch trigger
@mixin realhover() {
html.can-hover &:hover {
ul li {
@include realhover {
ul {
var touchEventRunning = false; //var to indicate whether touch event has just been fired
var curRootClass = ''; //var indicating current document root class ("can-hover" or "")
var touchTimer;
function runTouchStart(e){
touchEventRunning = true;
if (curRootClass == 'can-hover'){ //remove 'can-hover' class if not triggered by a touch event and class is present
curRootClass = '';
touchTimer = setTimeout(function(){touchEventRunning = false;}, 500); //maintain "touchEventRunning" state for 500ms so runMouseOver doesn't get fired immediately following a touch event
function runMouseOver(e){
if (!touchEventRunning && curRootClass != 'can-hover'){ //add "can-hover' class if it's not already present
curRootClass = 'can-hover';
document.addEventListener('touchstart', runTouchStart, false); //this event only gets called when input type is touch
document.addEventListener('mouseover', runMouseOver, false); //this event gets called when input type is everything from touch to mouse/ trackpad
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment