jquery - 使用CSS在悬停时显示图像

Question

我的图片很少，它们是动态从数据库中获取的。

当用户将鼠标悬停在图片上时，名称应显示在图片下方。

我如何使用 CSS 或 jquery 来做到这一点？

检查下图，这是应该的。

我的代码是

<div class="blue_strip_icon" style="padding-right: 15px;">
    <a href="<%= pag.page.id %>" class="icon_link">
    <img src="<%= @icon %>" title="<%= pag.page.page_title %>" />
    </a>
</div>

CSS 是

.blue_strip_icon{
    float: right;
    height: 50px;
    padding-top: 10px;
}

Answer 1

<div class="blue_strip_icon" style="padding-right: 15px;">
  <a href="<%= pag.page.id %>" class="icon_link">
  <img src="<%= @icon %>" title="<%= pag.page.page_title %>"/>
  </a>
  <div class="title"><%= pag.page.page_title %></div>
</div>

.blue_strip_icon{
    float: right;
    height: 50px;
    width:70px;
    padding-top: 10px;
}

.title{
    width:70px;
    border-radius:20px;
    background:white;
    color:blue;
    border:3px blue solid;
    display:none;

}

​$('.icon_link').hover(function(){
    $(this).next().slideDown(200);
},function(){ 
    $(this).next().slideUp(200);
});​

DEMO