We can use
mouse.onclick to handle the click and make the mouse “moveable” with
position:fixed, then then
mouse.onkeydown to handle arrow keys.
The only pitfall is that
keydown only triggers on elements with focus. So we need to add
tabindex to the element. As we’re forbidden to change HTML, we can use
mouse.tabIndex property for that.
P.S. We also can replace
Focus on the mouse. Then use arrow keys to move it:Demo in new window
P.S. Don’t put event handlers anywhere except the
P.P.S. Don’t modify HTML/CSS, the approach should be generic and work with any element.