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

Answer 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>

Answer 3

修改

试试这个

1. Close the div properly 2. Provide custom min-height for class .fadeIn_capsFull

FIDDLE：http://jsfiddle.net/QL3jD/26/

我只为课程min-height
提供.fadeIn_capsFull

Answer 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是因为设置了margin-bottom：10px和border等的css文件。

http://jsfiddle.net/uawG9/

Answer 5

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

在悬停图像上显示文字 - 但仅限于图像

5 个答案: