使用css悬停显示图像

我有几张图片，它们是从数据库动态获取的。使用css悬停显示图像

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

我该如何用CSS或jQuery来做到这一点？

检查下面的图像，这是它应该如何。

enter image description here

我的代码是

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

来源

2012-10-16 manish nautiyal

，并提供一些HTML代码 – Giona

请再次检查我的问题。 –

<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

来源

2012-10-16 11:58:18 Afshin

它的一个哇.......... :) –

通常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 
    }); 
});

来源

2012-10-16 09:46:11

如果你想做到这一点的纯CSS，我建议您加载您图像作为分区（div）中的背景图像，其格式为position: relative，并包含图像名称的跨度。跨度应该被隐藏并定位position: absolute 因此，所有你应该做的是：

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

来源

2012-10-16 09:50:30

使用css悬停显示图像

回答

相关问题