0

我有以下 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();
});

它应该显示标题，但不是..有什么想法吗？

4

4 回答 4

4

你可能会用 firebug 复制 html，

删除 li 元素上的样式。

检查这个 http://jsfiddle.net/kuyabiye/KumcX/194/

于 2012-05-14T15:21:19.870 回答
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/

于 2012-05-14T15:27:32.620 回答
1

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

$('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});
});
于 2012-05-14T15:20:28.607 回答
0

只需要进行一些调整，首先在您的 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%;}

希望这会有所帮助。

于 2012-05-14T15:28:09.590 回答