acdcjunior/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Touch or Hover device?</title>
    <style>
        @media (hover: hover) {
            #hover-hover { background: blue; color: white; }
            #hover-hover::after { content: " YES"; }
            #hover-none::after { content: " NO"; }
        }
        @media (hover: none) {
            #hover-none { background: blue; color: white; }
            #hover-hover::after { content: " NO"; }
            #hover-none::after { content: " YES"; }
        }
        @media (pointer: coarse) {
            #pointer-coarse { background: blue; color: white; }
            #pointer-coarse::after { content: " YES"; }
        }
        @media not all and (pointer: coarse) {
            #pointer-coarse::after { content: " NO"; }
        }

        #mouse:hover::after {
            content: "(element is being hovered)";
            display: block;
            color: red;
        }
    </style>
</head>
<body>
<div id="hover-hover">device is (hover: hover)</div>
<hr>
<div id="hover-none">device is (hover: none)</div>
<hr>
<div id="pointer-coarse">device is (pointer: coarse)</div>
<hr>
<div id="touch-end"></div>
<hr>
<button id="mouse">HOVER or CLICK or TOUCH or TOUCH+HOLD here</button>
<div id="mouselog"></div>

<script>
  document.getElementById('touch-end').innerHTML = 'touchend? ' + ('ontouchstart' in document.documentElement);
  const m = document.getElementById('mouse');
  const mlog = document.getElementById('mouselog');
  m.addEventListener("mouseenter", (e) => mlog.innerHTML += '<br>mouseenter ' + e.timeStamp);
  m.addEventListener("mouseleave", (e) => mlog.innerHTML += '<br>mouseleave ' + e.timeStamp);
  m.addEventListener("mouseup", (e) => mlog.innerHTML += '<br>mouseup ' + e.timeStamp);
  m.addEventListener("touchend", (e) => mlog.innerHTML += '<br>touchend ' + e.timeStamp);
  m.addEventListener("click", (e) => mlog.innerHTML += '<br>click ' + e.timeStamp);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Touch or Hover device?</title>
	<style>
	@media (hover: hover) {
	#hover-hover { background: blue; color: white; }
	#hover-hover::after { content: " YES"; }
	#hover-none::after { content: " NO"; }
	}
	@media (hover: none) {
	#hover-none { background: blue; color: white; }
	#hover-hover::after { content: " NO"; }
	#hover-none::after { content: " YES"; }
	}
	@media (pointer: coarse) {
	#pointer-coarse { background: blue; color: white; }
	#pointer-coarse::after { content: " YES"; }
	}
	@media not all and (pointer: coarse) {
	#pointer-coarse::after { content: " NO"; }
	}

	#mouse:hover::after {
	content: "(element is being hovered)";
	display: block;
	color: red;
	}
	</style>
	</head>
	<body>
	<div id="hover-hover">device is (hover: hover)</div>
	<hr>
	<div id="hover-none">device is (hover: none)</div>
	<hr>
	<div id="pointer-coarse">device is (pointer: coarse)</div>
	<hr>
	<div id="touch-end"></div>
	<hr>
	<button id="mouse">HOVER or CLICK or TOUCH or TOUCH+HOLD here</button>
	<div id="mouselog"></div>

	<script>
	document.getElementById('touch-end').innerHTML = 'touchend? ' + ('ontouchstart' in document.documentElement);
	const m = document.getElementById('mouse');
	const mlog = document.getElementById('mouselog');
	m.addEventListener("mouseenter", (e) => mlog.innerHTML += '<br>mouseenter ' + e.timeStamp);
	m.addEventListener("mouseleave", (e) => mlog.innerHTML += '<br>mouseleave ' + e.timeStamp);
	m.addEventListener("mouseup", (e) => mlog.innerHTML += '<br>mouseup ' + e.timeStamp);
	m.addEventListener("touchend", (e) => mlog.innerHTML += '<br>touchend ' + e.timeStamp);
	m.addEventListener("click", (e) => mlog.innerHTML += '<br>click ' + e.timeStamp);
	</script>
	</body>
	</html>