如何在悬停时显示图像标题文本？

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