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

我有以下JSFIDLE，但它似乎没有显示标题：

HTML:

JS:

$'ul li'。鼠标交互功能{ var image=$this.find'a img'， caption=$this.find'div'； caption.widthimage.width； caption.heightimage.height； 标题.fadeIn； }.鼠标移动功能{ var image=$this.find'img'， caption=$this.find'div'； caption.widthimage.width； caption.heightimage.height； 描述：衰减； };

---

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

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

$('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});
});

---

您可能使用firebug复制html

删除li元素上的样式

检查这个

---

重构了一些JS，放弃了内联标题样式，并更新了css类

jQuery

css

---

示例：

只需进行一些调整，首先，在CSS中，您需要提供一个左侧和顶部位置，以及一些高度和宽度，我已将其设置为100%，以跨越图像和相对位置，这样标题就可以很好地定位在图像上。哦，我也给了背景一个255255,0.5的rgba颜色来达到你的透明效果

你的JS很好，但你的问题是你有很多内联样式，所以删除它们，从那以后一切都应该正常

这是最新的提琴：

以及更新的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%;}

​希望这能有所帮助。

-他只是忘了删除2个内联样式定义。如果图像之间的高度和宽度发生变化，您可以再次插入逻辑

$('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});
});

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

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

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

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