1

我正在尝试在我的网站上制作手电筒效果。您应该可以用鼠标移动手电筒，我通过制作一个带有透明中心的黑色 png 跟随我的鼠标来制作手电筒。问题是我希望能够与 png 下面的东西进行交互。我发现这样做的唯一方法是使用"pointer-events: none;"，但 png 不会跟随我的鼠标。

有什么方法可以让我的 png 跟随鼠标在其他所有东西之上，但仍然能够点击 png？

这是我跟随鼠标的代码：

  $("#back").mousemove(function(e){
  $('.follow').css('top', e.clientY-2000).css('left', e.clientX-2350);
  });

这是我的图像代码，没有pointer-events:none：

<div id="back" style="width:0px;height:0px">

 <id class="follow"><img src="img/flashlight.png"  style="position: absolute; 
 z-index:10;"/></id>
 </div>
4

1 回答 1

0

您可能正在做的是设置pointer-events:none一个对象，然后尝试mousemove在同一个对象上捕获事件。那是行不通的——mousemove事件也是指针事件。

您需要做的是在其他地方（甚至在<body>元素中）捕获鼠标的移动，并使用这些事件来控制您的叠加图像。

不幸的是，jsfiddle 目前已关闭，但此 HTML 说明了解决方案（使用文本块而不是图像，但您会得到图片。）

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<style>
#loupe {
  position:absolute;
  z-index:999;
  top:0;
  left:0;
  height:100px;
  width:100px;
  opacity:0.5;
  font:10px/10px monospace;
  overflow:hidden;
  pointer-events:none;
}
</style>
</head>
<body>
<h1>Select This Text</h1>
<p>It should be possible, even with the overlay div in the way.</p>
<p>Here's a button for you to click: <button onclick="alert('Hello World :-)')">Say Hello</button></p>
<div id="loupe">####################
####################
####################
####################
####################
####################
####################
####################
####################
####################</div>
<script>
$( document ).ready(function() {
$('body').mousemove(function(e){$('#loupe').css('left',e.clientX-50).css('top',e.clientY-50);});
});
</script>
</body>
</html>
于 2013-10-26T21:10:19.557 回答