有没有一种方法让css3类跟随鼠标光标

Question

我对CSS3和JavaScript非常陌生，我正在挖掘这个主题的几天。 我想用图像掩盖照片。我想要面罩遵循鼠标指针。 我读过的是，使用类属性掩码或掩码图像完成掩码，然后是图像的url。 当鼠标移动时，是否有重新定位此掩码的方法？

Answer 1

当然，只是使用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

Answer 2

设定的初始样式：（在此情况下，使用限幅）

#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> 

working plunkr sample http://plnkr.co/edit/B8vKjIIFYp2oxiX6o8uI?p=preview