jQuery -event:鼠标X的位置在元素的垂直边界范围内 [英] Jquery -event: mouse X position is within element's vertical borders range

问题描述

当鼠标X的位置在类的垂直边框范围内时，我需要处理该事件.我的意思是，如果元素的X位置是:

I need to handle the event when mouse X position is within a class's vertical borders range. I mean, if the element's X position is:

X: 200px;
X+element.width(): 500px;

我想知道鼠标是否在水平范围内(200像素，500像素).它的垂直位置无关紧要.这里是一些进一步的解释:

I wanna know if the mouse is horizontally within (200px, 500px). It's vertical position doesn't matter. Here it is some further explanation:

任何帮助将不胜感激.

Any help would be appreciated.

推荐答案

我认为这就是您想要的

我想知道鼠标是否在水平范围内(200像素，500像素).它是 垂直位置无关紧要.

I wanna know if the mouse is horizontally within (200px, 500px). It's vertical position doesn't matter.

$(document).ready(function(){
  $(window).on('mousemove', function(e){
    if((e.pageX >= $('#container').offset().left) && (e.pageX <= $('#container').offset().left + $('#container').width())){
        $('#container').addClass('in');
      }
    else
      $('#container').removeClass('in');
  });  

});

#container{
  height:50px;
  position:relative;
  margin-left:200px;
  width:300px;
  border:1px solid;
  transition:.2s all;
}

#container.in{
  color:white;
  background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"> I go black when mouse is within my horizontal limits.</div>

这篇关于jQuery -event:鼠标X的位置在元素的垂直边界范围内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！