检查jquery中某个元素上的指针位置

check the pointer position on an element in jquery

本文关键字：指针 位置 元素 jquery 检查      更新时间：2023-09-26

我有一个关于使用jquery的悬停动画的简单说明，我在jquery中使用悬停和动画。除了一种情况外，一切都很好——当悬停在图像上的动画完成并显示标题时，如果鼠标指针在显示的标题上，则悬停在图像外的动画开始，假设我悬停在图像之外。。。因此，在应用悬停处理程序之前，我想检查鼠标指针是在图像本身上还是在标题上
编辑后的是标记

$( ".img-1" ).hover(function() {
  $( ".cap-1" )
  .animate({ "opacity": "1" }, 100 )
  .animate({ "top": "-=50%" }, 200 )
  .animate({ "top": "+=10%" }, 200 );
}, function() {
  $( ".cap-1" )
  .animate({ "top": "+=40%" }, 300 )
  .animate({ "opacity": "0" }, 100 );
});
.img-1 {
  width: 100%;
  height: 400px;
  background-color: rgba(0,0,0,0.4);
  }
.friends-caption {
  position: absolute;
  width: 79.5%;
  height: 37%;
  top: 99%;
  bottom: 0px;
  left: 20px;
  right: 0px;
  background-color: rgba(102, 102, 102, 0.7);
  border: none;
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  color: #fff;
  padding-top: 8%;
  opacity: 0;
  cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
  <img src="images/awn1.jpg" class="img-thumbnail img-1">
  <p class="friends-caption cap-1">Costa Cafe</p>
</div>

http://liveweave.com/C8NNC6
http://jsfiddle.net/zwzoresL/

为什么不将鼠标悬停在容器上而不是图像上呢？

$('.col-sm-2').hover(function () {
  $( ".cap-1" )
  .animate({ 
    "opacity": "1", 
    "top": "-=75%"
  }, 300 )  
  .animate({ 
    "top": "+=25%" 
  }, 200 );  
}, function () {
  $( ".cap-1" )
  .animate({ 
    "top": "+=50%", 
    "opacity": "0" 
  }, 300 );
});
.img-1 {
  width: 100%;
  height: 50%;
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.4);
}
.friends-caption {
  position: absolute;
  height: 25%;
  top: 384px;
  left: 10%;
  right: 10%;
  background: rgb(102, 102, 102);
  background: rgba(102, 102, 102, 0.7);
  border: none;
  font: 16px inherit;
  text-align: center;
  color: #fff;
  padding-top: 16px;
  cursor: default;
  opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2 col-sm-offset-1">
<img src="images/awn1.jpg" class="img-thumbnail img-1">
  <p class="friends-caption cap-1">Costa Cafe</p>
</div>

问题的最简单解决方案是将指针事件属性添加到你的.founders caption css规则：

.friends-caption {
    /* existing rules */    
    pointer-events: none;
}

这将防止鼠标事件从标题元素触发(https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)。

但是，此解决方案可能没有您所希望的跨浏览器兼容性。在这种情况下，我认为我们可以做以下事情来实现JavaScript/jQuery中的解决方案：

首先，为了更好地组织，让我们将动画步骤移动到它们自己的功能中：

var animateIn = function () {
    $('.cap-1' )
        .animate({ "opacity": "1" }, 100 )
        .animate({ "top": "-=50%" }, 200 )
        .animate({ "top": "+=10%" }, 200 );
 };
var animateOut = function () {
    $('.cap-1')
        .animate({ "top": "+=40%" }, 300 )
        .animate({ "opacity": "0" }, 100 );  
};

我们可以将悬停事件附加到.cap-1元素和.img-1元素，因为我们想知道鼠标何时进入任何一个元素。接下来，我们需要在unover处理程序中使用setTimeout，因为我们需要时间来跟踪鼠标是否已从一个目标元素移动到另一个——如果已经移动，我们可以清除超时，取消animateOut调用。最后，我们需要跟踪我们的标题是处于"in"状态，这样我们就不允许它在已经进入时动画化，还是在已经退出时动画化（这会导致标题在我们的页面上反复跳上跳下）：

var hover_timeout;
var caption_is_in;
$('.img-1,.cap-1').hover(function () {
    if ('number' === typeof hover_timeout) {
        clearTimeout(hover_timeout);   
    }
    if (!caption_is_in) {
        caption_is_in = true;
        animateIn(); 
    }
}, function () {
    hover_timeout = setTimeout(function () {
        if (caption_is_in) {
            caption_is_in = false;
            animateOut();
        }
    }, 50);
});

我制作了一把小提琴，可以在以下网址找到：http://jsfiddle.net/76484/sqyc0b61/.

编辑：

我已经意识到我的解决方案是不完整的，因为当标题处于"out"状态时，它仍然可以触发悬停事件。为了解决这个问题，我们可以向包含图像和标题的元素添加一个"container"类，并添加以下css规则：

.container {
    position:relative;
    overflow:hidden;
}

更新的小提琴：http://jsfiddle.net/76484/sqyc0b61/1/

相关文章：