jquery - 在悬停图像上显示文本 - 但仅在图像上显示

Question

我需要在鼠标悬停时在图像上显示标题文本，但只有图像会受到影响。它现在的工作方式是影响整个 div，包括图像下方的按钮。我怎样才能让悬停效果只影响他的形象并保持按钮不变？ 到目前为止，我已经尝试在标题 div 周围改组，但没有成功。 由于图像是响应式的(不是在这个例子中)我不能为 fadeIn_capsFull 类定义一个准确的高度
有什么建议么？

看看这个 FIDDLE

HTML

<div class="product-display fadeIn_caption">
<div class="fadeIn_capsFull">
<div class="capsFull_Text"><h5>PRODUCT ID12</h5><br>$225.00</div>
</div>
<a href="">
<img src="http://placehold.it/400x450" class="product-image" alt="">
</a>
<div class="product-addOptions">
<div class="product-toCart">Add to Cart</div>
<div class="product-toCompare">Add to Compare</div>
</div>
</div>

CSS

.fadeIn_capsFull {position:absolute; top:0; left:0; background:rgba(255, 255, 255, 0.75) ; width:420px; height:100%;display: table;  display: none; text-align:center; color:#000 !important; z-index:2; cursor:pointer;}
.capsFull_Text { padding-top: 24%; text-align: center; }
.product-display { width:400px; min-height: 400px; padding: 10px; font-size: 13px}
.product-image {margin-bottom:10px; border-bottom: 1px solid #000;}
.product-addOptions { width: 100%; background-color: #0CF;}
.product-toCart { width: 50%; border-right: 1px solid #000; float:left; text-align:center; padding-top:5px; }
.product-toCompare {width: 49%; float:left; text-align:center; padding-top: 5px; }

jQuery

$("[rel='tooltip']").tooltip();    

$('.fadeIn_caption').hover(
    function(){
        $(this).find('.fadeIn_capsFull').fadeIn(250)
    },
    function(){
        $(this).find('.fadeIn_capsFull').fadeOut(205)
    }
);

Answer 1

已更新 fiddle .

检查图像的高度以及应用到标题 div 的顶部位置。

$('.fadeIn_caption').hover(
    function(){
        $(this).find('.fadeIn_capsFull').fadeIn(250)
            .height($(this).parent().find('img').outerHeight(true))
            .css("top", $(this).parent.find('img').offset().top-$(this).parent().offset().top);
    },
    function(){
        $(this).find('.fadeIn_capsFull').fadeOut(205)
    }
);