Specific hover for touch

Asked

Viewed 145 times

0

Is there a CSS hover for touch? Or emulate one with javascript that only turns on if it’s touch?

javascript css hover touch

  • How would you trigger the Hover with touch? On the screen there is the mouse, but and with the finger?

  • It is because in the case I put a link inside a div that only appears with Hover and explains where it goes, with the mouse it appears, ja no touch, if touch, already goes straight to the link, I’m having difficulty in this part.

  • And how do you Hover with your finger without touching the screen ?

  • Tries to redo the structure by separating click mouseover.

  • I will try to do using the ontouchend events and the onmousemove within the div

1 answer

0


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>

Browser other questions tagged javascript css hover touch

You are not signed in. Login or sign up in order to post.