使用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懸停顯示圖像

回答

相關問題