使用 hover 在 div 文本中移动图像

Question

I'm trying to imitate this project in jsfiddle and how do I do this hover effect inside my React project without using jquery . Here's my current script tag: <script src="/umi.js"></script> in index.html . Is there any way to implement this effect without having to include <script> ? Here's my css code:

.bigTitle{
  font-weight: 800;
  color: transparent;
  font-size:120px;
  background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position:relative;
  text-align:center;
  line-height:90px;
  letter-spacing: -8px;
}

I would want the image inside the text to react according to my mouse position .

Answer 1

 const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const mouseMove = (e) => { let mouseX, mouseY; let traX, traY; mouseX = e.pageX; mouseY = e.pageY; traX = ((4 * mouseX) / 570) + 40; traY = ((4 * mouseY) / 570) + 50; document.getElementById('bigTitle').style.backgroundPosition = traX + "%" + traY + "%"; }

 #bigTitle{ font-weight: 800; color: transparent; font-size:120px; background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat; background-position: 40% 50%; -webkit-background-clip: text; position:relative; text-align:center; line-height:90px; letter-spacing: -8px; }

 <div id="bigTitle" onmousemove="mouseMove(event)">It works?</div>

This should do it, I just translated whatever it was in the example you provided in javascript.