Specific hover for touch

Question

Specific hover for touch

Navigation

#1 by (0 votes)

0

Is there any CSS Hover for touch? Or way to emulate one with javascript that only activates if it is touch?

javascript css touch hover

asked by anonymous 05.07.2018 / 02:09

1 answer

laravel project creation. problem npm Search ajax with laravel 5.6 and jquery [closed]

score 0 · Answer 1

My solution was this:

window.onload = function(e){
	x = document.getElementById('x');
	
	x.addEventListener("touchstart", touch);
	x.addEventListener("touchend", touch);
	x.addEventListener("mousemove", mouse);
	x.addEventListener("mouseout", mouse);
	
	function touch(event){
		if(event.type == 'touchstart'){ 
            setTimeout(function(){ 
			x.style.background = 'blue';
            }, 200);
		}
		if(event.type == 'touchend'){
			setTimeout(function(){ 
				x.style.background = 'red'; 
			}, 3000);
		}
	}
	function mouse(event){
		if(event.type == 'mousemove'){ 
			x.style.background = 'blue';
		}
		if(event.type == 'mouseout'){
			x.style.background = 'red';
		}
	}
}

#x{
	height: 300px;
	width: 300px;
	background: red;
}

<div id="x"></div>