我有几张图片,这些图片是从数据库中动态获取的。
当用户将鼠标悬停在图像上时,名称应显示在图像下方。
如何使用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;
}发布于 2012-10-16 19:58:18
<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);
});发布于 2012-10-16 17:50:30
如果你想用Pure CSS来做这件事,我建议你把你的图像作为背景图像加载到一个分区(div)中,这个分区有position: relative并且包含一个名为image的跨度。该跨度应该由position: absolute隐藏和定位,因此您所要做的就是:
div.CLASS:hover > span.child {
// show the span or blah blah...
}发布于 2012-10-16 17:46:12
通常,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
});
});https://stackoverflow.com/questions/12911805
复制相似问题