Невозможно установить радиально-градиентный фон при перемещении мыши

Question

Если кто-то переместит курсор на контент, то только он сможет просматривать контент. Я думаю, что-то не так с моим кодом.

$(document).mousemove(function(e) {
  var X = e.pageX;
  var Y = e.pageY;

  $('.light').css('background', 'radial-gradient(circle at ' + X + 'px
    '+Y+'
    px, transparent, #000 30%)');
  })

@import url('https://fonts.googleapis.com/css? family=Creepster&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Creepster', cursive;
  box-sizing: border-box;
}

section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #000;
  padding: 100px;
}

section h2 {
  color: #F7060A;
  font-size: 4em;
}

section p {
  color: #EE0A0A;
  font-size: 1.2em;
  font-weight: 300;
}

section img {
  max-width: 50%;
  margin: 50px 300px 0;
}

.light {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

<section>
  <div class="light"></div>
  <h2 align="center">Say! Hello </h2><br><br>
  <p>aaaaaaaaaaaaaaaaaa</p>
  <img src="bg.png">
</section>
<script scr="https://code.jquery.com/jquery-3.4.1.js"></script>

Answer 1

В вашем коде jquery есть ошибка syntax, внесите следующие изменения в код:

$(document).mousemove(function(e) {

  var X = e.pageX;

  var Y = e.pageY;
  $('.light').css('background', 'radial-gradient(circle at ' + X + '%' + Y + '%,  transparent, #000 50%)');


})

@import url('https://fonts.googleapis.com/css? family=Creepster&display=swap');
* {
  margin: 0;
  padding: 0;
  font-family: 'Creepster', cursive;
  box-sizing: border-box;
}

section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #000;
  padding: 100px;
}

section h2 {
  color: #F7060A;
  font-size: 4em;
}

section p {
  color: #EE0A0A;
  font-size: 1.2em;
  font-weight: 300;
}

section img {
  max-width: 50%;
  margin: 50px 300px 0;
}

.light {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<section>
  <div class="light"></div>
  <h2 align="center">Say! Hello </h2><br><br>
  <p>aaaaaaaaaaaaaaaaaa</p>
  <img src="bg.png">
</section>