如何在懸停時顯示圖像標題文本？

Question

我正在構建一個基本的WordPress網站。這是演示頁我需要幫助：

http://irontemplates.com/wp-themes/ironband/photos/

當鼠標懸停的形象，我想讓它顯示的圖像的標題是說之前的「查看圖像。」

這是我假設的JavaScript或jQuery？任何人都可以給我一個關於如何去做這件事的示例代碼？

Answer 1

var title= $("#imageid").attr("title"); 

然後在懸停：

$("#imageid").on("hover",function(){ 
    alert(title); 
}); 

試試這個。

Answer 2

<a href="http://irontemplates.com/wp-themes/ironband/content/uploads/2013/08/photo_2112.jpg" rel="lightbox" class="lightbox hoverZoomLink"> 
    <img src="http://irontemplates.com/wp-themes/ironband/content/uploads/2013/08/photo_2112-300x230.jpg" width="352" height="347" alt=""> 
     <span class="hover-text"><span>VIEW IMAGE</span></span> 
    </a> 

這是包含所有該頁面的圖像的無序列表中存在的一個列表元素中找到。

您需要更改最裏面的span標籤之間的內容。在這種情況下，它會顯示「查看圖像」，將其更改爲「圖像1」或任何你想要的。

您可以使用Javascript爲您動態命名，但那不完全是您的問題！

Answer 3

View-Image是一個新的鏈接到真實圖像，或完整大小的圖像。它可以有圖像就像這個標題：

<a href="#" title="title to show"> 
    <img src="source/to/file.ng" alt="photo" /> 
</a> 

這樣，您將顯示該鏈接的圖像冠軍。

Answer 4

你可以做到這一點與JS：

var ls_input_section_header = document.createElement("img"); 
ls_input_section_header.title="info to display on hover of info"; 
ls_input_section_header.className="ls_input_section_header_gs"; 
ls_input_section_header.setAttribute("src","style/img/info.gif"); 
ls_input_section.appendChild(ls_input_section_header); 

或者您也可以只使用CSS

.ls_input_section_header_gs 
{ 
position: absolute; 
    top: 15px;  
} 
    .ls_input_section_header_gs a:hover:after { 
    content: attr(title); 
}