Question

我有以下jsfiddle，但它似乎没有显示标题： http://jsfiddle.net/KumcX/189/

HTML：

<ul>
<li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
    <li>
    <div class="caption" style="width: 220px; height: 140px; display: block; opacity: 0.0524612;">this is my caption</div>
    <a href="#"><img src="http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367" alt=""></a></li>
</ul>

CSS：

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;}
ul li div{display:none; background:white; opacity:.5; position:absolute;}

JS：

$('ul li').mouseenter(function(){
    var image= $(this).find('a img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeIn();
}).mouseleave(function(){
     var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.fadeOut();
});

它应该显示标题，但它不是..任何想法？

Answer 1

您可能使用firebug复制html，

删除li元素上的样式。

检查一下 http://jsfiddle.net/kuyabiye/KumcX/194/

Answer 2

重构了一些JS，抛弃了内联字幕样式，并更新了css类

<强>的jQuery

$(".caption").css('opacity', 0);

$('ul li').mouseenter(function() {    
    $(this).find(".caption").animate({ 'opacity': 0.9 });
}).mouseleave(function() {
    $(this).find(".caption").animate({ 'opacity': 0 });
});

<强> CSS

ul li {
    float:left; 
    padding:20px; 
    border:solid gray 4px; 
    margin:5px;
}
.caption {
    width: 220px;
    background: #fff; 
    height: 150px;        
    position: absolute;
}

示例：http://jsfiddle.net/hunter/KumcX/201/

Answer 3

使用动画效果，配置不透明度：

$('ul li').mouseenter(function(){
    var image= $(this).find('a img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0.5});
}).mouseleave(function(){
    var image= $(this).find('img'),
        caption = $(this).find('div');

    caption.width(image.width());
    caption.height(image.height());
    caption.animate({'opacity':0});
});

Answer 4

只需要进行一些调整，首先在你的CSS中你需要给你的<div>一个左上角位置以及一些高度和宽度我已设置为100％以跨越图像和你的<li>位置相对，所以标题很好地定位在图像上。哦，我还为<div>背景提供了255,255,255,0.5的rgba颜色，以达到透明效果。

你的JS很好，但你的问题在于你有很多内联样式，所以删除那些，从那时起一切都应该正常。

这是一个更新的小提琴：http://jsfiddle.net/KumcX/197/

更新的CSS：

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;position:relative}
ul li div{display:none; background:rgba(255,255,255,.5); position:absolute;left:0;top:0;width:100%;height:100%;}

希望这有帮助。

使用CSS和JQUERY在图像上显示标题

4 个答案: