Check out my demonstration here: http://jsfiddle.net/x01heLm2/
I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be triggered if the user hovers over the click area (goal number two). Currently, I have bound the hover event to the parent element, which is .box, and this has achieved goal number one but I am stuck on achieving goal number two.
Can anyone provide guidance on how to prevent triggering the hover event when the user hovers over the click area first?
$(document).ready(function() {
$('.box').not('.box .box-lower').hover(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'
});
}, function() {
$(this).find('.productsThumbWrap').stop(true, true).css({
'margin-top': '92px'
});
$(this).find('.productsThumbWrap img').stop(true, true).css({
opacity: 0,
'transition': 'none'
});
});
});.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>