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/

为什么不将悬停应用于容器而不是图像？

＆＃13;

$('.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 );
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

解决问题的最简单方法是在.friends-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，因为我们想知道鼠标何时输入了任何一个元素。接下来，我们需要在我们的卸载处理程序中使用setTimeout，因为我们需要时间来跟踪鼠标是否从我们的目标元素之一移动到另一个 - 如果有，我们可以清除超时，取消我们的animateOut致电。最后，我们将需要跟踪我们的标题是否处于“处于”状态，以便我们不允许它在其处于正常状态时进行动画处理，或者在它已经输出时进行动画处理（这将导致标题重复跳转在我们的页面上下：）

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”状态时，标题仍然可以触发悬停事件。要解决这个问题，我们可以在包含图像和标题的元素中添加一个“容器”类，并添加以下css规则：

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

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

检查jquery中元素的指针位置

2 个答案: