有没有办法让 css3 类跟随鼠标光标

Is there a way for a css3 class to follow the mouse cursor

本文关键字：跟随 鼠标 光标 css3 有没有      更新时间：2023-09-26

我对CSS3和JavaScript很陌生，我正在挖掘这个主题几天。我想用图像遮罩照片。我想让面具跟随鼠标指针。我读到屏蔽是用类属性掩码或掩码图像完成的，后跟图像的 url。有没有办法在鼠标移动时重新定位此蒙版？

当然，只需使用 JavaScript 来监听 mousemove 事件：

像这样： 

document.getElementById('myVerySpecificContainer').addEventListener('mousemove', function(event) {
  // reposition whatever with the event coordinates (clientX, clientY, screenX, screenY)
}

完成后，removeEventListener因为这是一个非常昂贵的活动。

可在此处找到可用的事件属性：https://developer.mozilla.org/en-US/docs/Web/Events/mousemove

设置初始样式：（在本例中使用剪切） 

  #pic {
    position: absolute;
    clip: rect(0px, 100px, 100px, 0px);
  }

然后设置一些JS以在鼠标移动时更新样式

<img id='pic' src="http://www.html5rocks.com/en/tutorials/masking/adobe/clip1a.png" width="568">
    <script>
      document.body.onmousemove= function(e){
        document.getElementById("pic").style.clip = "rect("+(e.clientY-50)+"px "+(e.clientX+50)+"px "+(e.clientY+50)+"px "+(e.clientX-50)+"px)";
      }
    </script>

工作普伦克尔样品http://plnkr.co/edit/B8vKjIIFYp2oxiX6o8uI?p=preview

相关文章：