Additional Content on Hover or Focus

From Level Access Web Labs
Revision as of 18:55, 9 November 2018 by Javila (talk | contribs) (Created page with "<html> <head> <style> #additional { background-color: azure; border: thin solid gray; width: 10em; } </style> <script> function setup() {...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

<html>

 <head>

<style> #additional { background-color: azure; border: thin solid gray; width: 10em; } </style> <script> function setup() { document.getElementById("info").addEventListener( "focus",display); document.getElementById("info").addEventListener( "mouseover",display); document.getElementById("info").addEventListener("blur",hide); document.getElementById("info").addEventListener("mouseout",hide); document.getElementById("additional").addEventListener("mouseout",hide); document.getElementById("info").addEventListener("keyup",keyListener); }

function keyListener(e) {

if (e.code == "Escape") document.getElementById("additional").setAttribute("hidden","hidden"); }

function hide(e) { if (e.relatedTarget && e.relatedTarget.id != "additional") document.getElementById("additional").setAttribute("hidden","hidden"); if (e.target.id == "additional" && e.relatedTarget && e.relatedTarget.id != "info") document.getElementById("additional").setAttribute("hidden","hidden"); }

function display(e) { document.getElementById("additional").removeAttribute("hidden"); }

</script>

 </head>
 <body onload="setup();">

<button id="info" aria-describedby="additional"> Information </button> <button> Do nothing</button>

</body>