javascript - 检查 jquery 中元素上的指针位置

Question

我使用 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>

Answer 1

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>