css - 将 div 应用为鼠标悬停淡入 100% 宽度标题的简单未膨胀方法

Question

标题几乎说明了一切。有大量的脚本可以这样做，但其中大多数都非常臃肿，最终搞砸了脚本，只使用来自 alt 标签的信息。我的脚本如下:

<ul>
     <li style="display:block">
           <img src="images/portfolio/talktostrangers/1.jpg" />
                <div class="caption">
                <span class="projecttitle">Talk to Strangers</span>A social awareness campaign that proposes people talk to strangers on trains, subways, elevators, & the like.
                </div>
     </li>
</ul>

可以在此处查看预览以了解它的去向:http://www.studioimbrue.com/beta

Answer 1

如果我没理解错的话，您只是希望在将鼠标悬停在图像上时显示标题。最好的方法是使用 javascript。我推荐使用 js 框架，比如 jQuery，这真的很容易。您可以只包含 jQuery 源代码并将其放在文档头部的脚本标记或外部文件中。

$(document).ready(function(){
    $('li img').hover(function(){
       $(this).siblings('div.caption').fadeIn('slow');
    }, function(){
       $(this).siblings('div.caption').fadeOut('slow');
    });
});

然后就是 css 样式、不透明度、背景颜色、文本颜色。由你决定。

关于问题标题中的 100% 宽度，因为它在 DIV 标记中，它应该自动填充其父 LI 的 100%。