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

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/