单击元素但检测悬停

Click through element but detect hover

本文关键字：悬停 检测 元素 单击      更新时间：2023-09-26

我有一个元素作为传感器位于页面中间。该元素大于其下方包含链接的区域。我需要能够在鼠标悬停/移到传感器上时进行注册，以及单击下面的链接。

我已经查看了SO，但是由于我需要这个圆形传感器浮动在页面中间，因此我找不到适合我问题的解决方案。

#css
.sensor {
  pointer-events: none; # does not register jquery's mouseenter, but allows the links to be clicked
}
#javascript
$('.sensor').mouseenter(doStuff) #only works if pointer events are enabled

这是一个基本模型的小提琴：

http://jsfiddle.net/3rym41ra/

提前谢谢。

我在页面上放置了一个圆形传感器，当悬停时会改变背景。由于传感器现在是链接的父级，因此所有事件都将冒泡。您可以单击元素，同时仍根据需要使用传感器的某些区域

$('body').mousemove(function(e) {
  // We want it circular on page so we take 50% left and 50% top as the middle
  // Cirle has radius = 100px
  var middle = {
    x: $(window).width() / 2,
    y: $(window).height() / 2
  }; // Our middle-point
  var normalize = {
    x: middle.x - e.pageX,
    y: middle.y - e.pageY
  }; // mouse-position relative to the middle
  var radius = 100; // radius
  // some Math
  if (normalize.x * normalize.x + normalize.y * normalize.y < radius * radius) {
    // inside circle
    $('body').css('background', 'red');
  } else {
    // outside
    $('body').css('background', 'white');
  }
})
body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>

相关文章：