Question

我正在尝试使用标题的问题。我希望你能帮助我。

基本上我正试图让.caption-holder向上滑动图像。它已经正确定位，但我无法弄清楚当我在所需的图像上时如何使标题向上滑动或显示。

这是我的jQuery：

//Caption
$(".photo-container").mouseover(function (){
    $(this)

    imgW = $(this).width();
    imgH = $(this).height();

    $(".caption-holder").css({"display":"block"})
    $(".caption-img-overlay").css({"width":imgW, "height":imgH});
    $(".caption").css({"width":imgW, "padding":"12px 18px 3px 18px"});
});

CSS：

.photo-container {
    background:rgba(251,171,0,0.1);
    position:relative;
    display:inline-block;
}

.caption-holder {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

.caption-img-overlay {
    height:300px;
    background:rgba(251,176,0,0.2);
}

.caption {
    width:0;
    height:56px;
    padding:0 0;
    color:#a65500;
    font-size:14px;
    line-height:14px;
    text-shadow:rgba(255,255,255,0.5) 1px 1px 2px;
    background:url(../images/bg_image_caption.png);
}

HTML：

<div class='photo-container'>
  <img src='image.jpg' />
  <div class='caption-holder'>
    <div class='caption-img-overlay'>
      <div class='caption'>
        <h4>Pruebas</h4>
        <p>texto prueba</p>
      </div>
    </div>
  </div>
</div>

如果可以，请帮助我将标题向上滑动：）

Answer 1

http://jsfiddle.net/gygHg/ 使用此示例

$('.thumbs li').mouseover(function() {      
$(this).find('.caption').fadeIn(500);
});

$('.thumbs li').mouseleave(function() {       
$(this).find('.caption').fadeOut(500);
});

Answer 2

试试这个：

$(".caption-holder").height(0).show().animate({height: imgH});

请参阅here

以下是使用find()的两张图片example以获取相关的.caption-holder

jQuery Caption在mouseenter上显示

2 个答案: