Crosshair MouseMove jQuery

by Thanos Saringelos

HTML

<button>Test</button>
<button>Test</button>
<button>Test</button>

<div class="overlay"></div>
<div class="v"></div>
<div class="h"></div>

CSS

html,
body {
  height: auto;
  width: auto;
  padding: 0;
  margin: 0;
}

body {
  margin: 40px;
}

.v,
.h {
  background: red;
  position: absolute;
  opacity: 0.6;
  pointer-events: none;
  top: 0;
  left: 0;
}

.v {
  height: 100%;
  width: 4px;
  margin-left: -2px;
  background: red;
}

.h {
  width: 100%;
  height: 4px;
  margin-top: -2px;
}

.overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 200px;
  height: 60px;
  background: rgba(255, 255, 0, 0.2);
  pointer-events: none;
}

JavaScript

$(window).mousemove(function(e) {
  $('.v').css('left', e.clientX + 'px');
  $('.h').css('top', e.clientY + 'px');
});