Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> #parent { background: #008000; width: 200px; height: 140px; position: relative; } #child { background: #0000FF; width: 50%; height: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } textarea { height: 200px; width: 500px; display: block; } </style> </head> <body> <div id="parent" onmouseenter="mouselog(event)" onmouseleave="mouselog(event)"> Parent <div id="child">Child</div> </div> <textarea id="text"></textarea> <input type="button" onclick="text.value=''" value="Clear"> <script> function mouselog(event) { let d = new Date(); text.value += `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} | ${event.type} [target: ${event.target.id}]\n`.replace(/(:|^)(\d\D)/, '$10$2'); text.scrollTop = text.scrollHeight; } </script> </body> </html>