無法在 mousemove 上設置徑向漸變背景

Question

如果有人在內容上移動 cursor，那么只有他們才能查看內容。 我認為我的代碼有問題。

 $(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>