首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >使用css在悬停时显示图像

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

Stack Overflow用户
提问于 2012-10-16 17:44:38
回答 3查看 1.3K关注 0票数 3

我有几张图片,这些图片是从数据库中动态获取的。

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

如何使用CSS或jquery实现此目的?

检查下面的图像,这是它应该是这样的。

我的代码是

代码语言:javascript
复制
<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是

代码语言:javascript
复制
.blue_strip_icon{
    float: right;
    height: 50px;
    padding-top: 10px;
}
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-10-16 19:58:18

代码语言:javascript
复制
<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

票数 3
EN

Stack Overflow用户

发布于 2012-10-16 17:50:30

如果你想用Pure CSS来做这件事,我建议你把你的图像作为背景图像加载到一个分区(div)中,这个分区有position: relative并且包含一个名为image的跨度。该跨度应该由position: absolute隐藏和定位,因此您所要做的就是:

代码语言:javascript
复制
div.CLASS:hover > span.child {
 // show the span or blah blah...
}
票数 1
EN

Stack Overflow用户

发布于 2012-10-16 17:46:12

通常,title属性由浏览器解释,并在您将鼠标悬停在元素上时显示为工具提示。所以你并不真的需要jQuery来做这件事。

此行为的问题在于,您实际上无法控制此工具提示的格式。但是,如果您希望在某些自定义部分中显示和格式化此值,则可以订阅这些图像的.hover()事件:

代码语言:javascript
复制
$(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
    });
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12911805

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档