Question

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

有没有办法让我的png跟随鼠标高于其他所有东西，但仍然能够点击png？

这是我关注鼠标的代码：

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

这是我没有指针事件的图像代码：无

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

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

感谢您的回复。

Answer 1

您可能正在做的是为对象设置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>

让png跟随鼠标，同时仍能通过它进行交互

1 个答案: