排除懸停從觸發父母的孩子

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

如果你運行你的舊代碼，它仍然不過觸發的擴展，當你將鼠標懸停邊境或只是，你有一些填充下面的按鈕......（這就是爲什麼將一個容器取而代之的是讓它變得更容易..）