Jquery 使用css在悬停时显示图像

我有几个图像，它们是动态地从数据库中获取的

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

如何使用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>

---

通常，当您将鼠标悬停在元素上时，浏览器会解释title属性，并将其显示为工具提示。因此，您实际上不需要jQuery来完成此任务

此行为的问题在于，您实际上无法控制此工具提示的格式。但是，如果要在某个自定义部分中显示并格式化此值，可以订阅这些图像的.hover（）事件：

$(function() {
    $('img').hover(function() {
        var title = $(this).attr('title');
        // TODO: do something with the title
    }, function() {
        // this will be triggered when the mouse pointer leaves the element
    });
});

---

如果您想通过纯CSS实现这一点，我建议您将图像作为背景图像加载到分区（div）中，该分区具有

position:relative

，并包含一个带有图像名称的span。 应通过

position:absolute

所以你应该做的就是：

div.CLASS:hover > span.child {
 // show the span or blah blah...
}

.蓝色条状图标{
浮动：对；
高度：50px；
宽度：70px；
填充顶部：10px；
}
.头衔{
宽度：70px；
边界半径：20px；
背景：白色；
颜色：蓝色；
边框：3倍蓝色实心；
显示：无；
}
​$（'.icon_link'）。悬停（函数（）{
$（this.next（）.slideDown（200）；
}，函数（）{
$（this.next（）.slideUp（200）；
});​

---

请再次检查我的问题。

div.CLASS:hover > span.child {
 // show the span or blah blah...
}

<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);
});​