Crosshair guides for visualizations

Pair of perpendicular lines that moves when the mouse moves. 

HTML

 <div id="crossHairX" style="cursor:default;width:100%;height:0;position:fixed;top:0;right:0;border-top:1px dashed green;"></div> 
 <div id="crossHairY" style="cursor:default;width:0;height:100%;position:fixed;top:0;right:0;border-left:1px dashed olive;"></div>

JavaScript

var cX = document.getElementById("crossHairX");
var cY = document.getElementById("crossHairY");

cX.style.zIndex=10
cY.style.zIndex=10

document.body.addEventListener("mousemove",e=>{
  cX.style.top=(e.clientY-2)+"px"
  cY.style.left=(e.clientX-2)+"px" 

})