[英]jQuery Caption displaying on mouseenter
我要尝试的字幕有问题。 我希望你能帮助我。
基本上,我试图使.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>
如果可以的话,请帮助我使字幕向上滑动:)
http://jsfiddle.net/gygHg/使用此示例
$('.thumbs li').mouseover(function() {
$(this).find('.caption').fadeIn(500);
});
$('.thumbs li').mouseleave(function() {
$(this).find('.caption').fadeOut(500);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.