排除悬停从触发父母的孩子

Question

我的演示：http://jsfiddle.net/x01heLm2/

我想微型缩略图，当我从.box（目标1）悬停仍然会出现，但我不想触发悬停事件如果用户将鼠标悬停在点击区域（目标2）上。我将悬停事件绑定到父级，这是.box，它实现了目标1，但坚持实现目标2。

如果用户首先将鼠标悬停在点击区域上，如何不触发悬停事件？

 \t $(document).ready(function() { 
 
    \t $('.box').not('.box .box-lower').hover(function() { 
 
    \t  $(this).find('.productsThumbWrap').stop(true, true).animate({ 
 
    \t  "margin-top": "+=108px" 
 
    \t  }, "normal"); 
 
    \t  $(this).find('.productsThumbWrap img').stop(true, true).css({ 
 
    \t  opacity: 1, 
 
    \t  'transition': 'opacity 0.3s ease 0.35s' 
 
    \t  }); 
 
    \t }, function() { 
 
    \t  $(this).find('.productsThumbWrap').stop(true, true).css({ 
 
    \t  'margin-top': '92px' 
 
    \t  }); 
 
    \t  $(this).find('.productsThumbWrap img').stop(true, true).css({ 
 
    \t  opacity: 0, 
 
    \t  'transition': 'none' 
 
    \t  }); 
 
    \t }); 
 
    \t });

.box { 
 
    width: 100%; 
 
    height: auto; 
 
    min-height: 290px; 
 
    margin-bottom: 30px; 
 
    border: 5px solid #000 
 
} 
 
.orange { 
 
    background: orange 
 
} 
 
.box-lower { 
 
    background: red; 
 
    height: 80px; 
 
} 
 
.box-upper { 
 
    position: absolute; 
 
} 
 
.productsThumbWrap { 
 
    text-align: center; 
 
    margin-top: 92px; 
 
} 
 
.productsThumbWrap img { 
 
    padding: 14px 6px; 
 
    display: inline; 
 
    opacity: 0; 
 
} 
 
.click { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="col-lg-6"> 
 
    <div class="box"> 
 
    <div class="box-upper"> 
 
     <img src="http://placehold.it/398x200" /> 
 
    </div> 
 
    <div class="productsThumbWrap"> 
 
     <img src="http://placehold.it/80x80" /> 
 
     <img src="http://placehold.it/80x80" /> 
 
     <img src="http://placehold.it/80x80" /> 
 
     <img src="http://placehold.it/80x80" /> 
 
    </div> 
 
    <div class="box-lower"> 
 
     <button class="click">Click</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

如果我想很容易让我来说，我想补充的包装围绕 “悬停展开” 位
（查看演示：http://jsfiddle.net/ncbrr6py/）

<div class="hoverExpand"> 
</div> 

围绕“悬停展开”部分给出：

<div class="hoverExpand"> 
    <div class="box-upper"> 
     <img src="http://placehold.it/398x200" /> 
    </div> 
    <div class="productsThumbWrap"> 
     <img src="http://placehold.it/80x80" /> 
     <img src="http://placehold.it/80x80" /> 
     <img src="http://placehold.it/80x80" /> 
     <img src="http://placehold.it/80x80" /> 
    </div> 
</div> 

然后你就可以在你的JavaScript更改为：

$(document).ready(function() { 
    $('.hoverExpand').mouseenter(function() { 
     $(this).find('.productsThumbWrap').stop(true, true).animate({ 
      "margin-top": "+=108px" 
     }, "normal"); 
     $(this).find('.productsThumbWrap img').stop(true, true).css({ 
      opacity: 1, 
      'transition': 'opacity 0.3s ease 0.35s' 
     }); 
    }); 
    $('.box').mouseleave(function() { 
     $(this).find('.productsThumbWrap').stop(true, true).css({ 
      'margin-top': '92px' 
     }); 
     $(this).find('.productsThumbWrap img').stop(true, true).css({ 
      opacity: 0, 
      'transition': 'none' 
     }); 
    }); 
}); 

需要注意的是，现在用户鼠标进入和鼠标离开相反，这可能不是你想要的，但据我所知，你将工作相同的（例如：即使你使用Alt-Tab将触发你的方式进入浏览器，你的光标在扩展区“结束”）

我也加入了一些CSS：

.hoverExpand{ 
    overflow:hidden; 
} 

，这将解决一些问题正在显示的框很奇怪（这就是为什么你在整个控制周围都有边界？）。

如果您希望扩展器在用户悬停按钮时收缩，那么您应该将mouseleave绑定到.hoverExpander，但这会让点击按钮变得相当尴尬，因为它会从光标缩小。还有另一种选择，如果你将事件作为参数传递给事件处理程序，则可以通过event.stopPropagation（）来停止冒泡/传播DOM树的事件，并且将事件绑定到任何应该停止冒泡：

$('.box-lower').hover(function(event){ 
    event.stopPropagation(); 
}); 

如果你运行你的旧代码，它仍然不过触发的扩展，当你将鼠标悬停边境或只是，你有一些填充下面的按钮......（这就是为什么将一个容器取而代之的是让它变得更容易..）