Question

我有几个部分，如果鼠标位于该区域，例如本节底部的200px，我想更改鼠标光标。

我尝试使用该代码，但它仅适用于第一部分。 e.pageY不会在下一节中重置。

$("section").on('mousemove', function(e){
var sectionHeight = $(this).height();
  var vertical = e.pageY;
  console.log(vertical);
  if(vertical > (sectionHeight - 200)) {      
    $('body').css("cursor","pointer");
  } else{
    $('body').css("cursor","auto");
  }
});

非常感谢您的帮助。

Answer 1

<强> Working Example

您需要使用offsetY来提供与该部分相关的鼠标位置，请查看以下示例：

 var vertical = e.offsetY;

希望这有帮助。

$("section").on('mousemove', function(e){
  var sectionHeight = $(this).height();
  var vertical = e.offsetY;

  console.log(vertical );
  
  if(vertical > (sectionHeight - 50)) {      
    $('body').css("cursor","pointer");
  } else{
    $('body').css("cursor","auto");
  }
});

section{
  height:100px;
  width:100%;
  border: 2px solid #AAA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>AAAA</section>
<section>BBBB</section>
<section>CCCC</section>

Answer 2

基本上，有一个名为offsetY的属性可以告诉您光标在客户端的边界框中的位置，所以在这种情况下你的<section>：

＆＃13;

$("section").on('mousemove', function(e){
  if(e.offsetY > $(this).height() - 100){      
    $(this).css("background","blue");
  } else{
    $(this).css("background","red");
  }
});

＆＃13;

section {
  width: 100%;
  height: 400px;
  background: gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section></section>

＆＃13;

校正

它是offsetY，而不是clientY。

如何检查鼠标位置是否位于div的底部区域

2 个答案:

校正