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

【问题标题】：display text on hover image - but only on image在悬停图像上显示文本 - 但仅在图像上
【发布时间】：2014-06-05 21:04:19
【问题描述】：

我需要在悬停时在图像上显示标题文本，但只有图像会受到影响。它现在的工作方式是影响整个 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)
    }
);

【问题讨论】：

您的
看起来不正确。您可能希望将图像包装在 div 中并将鼠标悬停在其上。
请填写你的 dom 应该放置的结束 div
你是对的，一个关闭的 div 在复制粘贴中脱落了；ing
问题现已更新，包括缺少结束 div

标签： jquery html css

【解决方案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)
    }
);

【讨论】：

【解决方案2】：

我会建议一个更简单的方法。它看起来不是很时尚，但很管用！删除您为工具提示文本添加的所有内容。现在只需在该元素的标题属性中添加您想在鼠标悬停时显示的任何内容：

<element title="Tool tip text you want">...</element>

在这种情况下，它会是这样的：

<a href="">
<img title="Tool tip text" src="http://placehold.it/400x450" class="product-image" alt="">
</a>

【讨论】：

【解决方案3】：

编辑：

试试这个

1. Close the div properly

2. Provide custom min-height for class .fadeIn_capsFull

小提琴：http://jsfiddle.net/QL3jD/26/

我只是为.fadeIn_capsFull 类提供min-height

【讨论】：

谢谢你，但你有没有注意这一行：“由于图像是响应式的（不在这个例子中）我不能为fadeIn_capsFull类定义一个精确的高度”
@no0ne，对不起，我不知道，那么最小高度呢？？这样可以吗？
不知道那会怎样。你有例子吗？
@no0ne，我刚刚添加了最小高度，请查看编辑后的答案和小提琴
@none 确保它适用于响应式图像，您可以进行必要的更改:)

【解决方案4】：

尝试在悬停事件处理程序中添加此代码。它将根据图像的高度设置 div 的高度。

 $('.fadeIn_capsFull').height($('img').height()+20);

原来如此

$('.fadeIn_caption').hover(
        function(){

            $('.fadeIn_capsFull').height($('img').height()+20);
            $(this).find('.fadeIn_capsFull').fadeIn(250)
        },
        function(){
            $(this).find('.fadeIn_capsFull').fadeOut(205)
        }
    );

注意：设置+20是因为css文件设置了margin-bottom:10px、边框等。

http://jsfiddle.net/uawG9/

【讨论】：

【解决方案5】：

或者如果你想使用一些 jQuery 插件，请查看this

【讨论】：