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

Question

我正在建立一个基本的 Wordpress 网站。这是我需要帮助的演示页面：

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

当鼠标悬停在图像上时，我希望它在显示“查看图像”之前显示图像的标题。

我假设这是 javascript 还是 jQuery？谁能给我一个示例代码，说明我将如何解决这个问题？

Answer 1

The View-Image is a new link to the real image, or the full sized image. Which can have the title of the image Just like this:

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

This way, you will show the image title in the link..

Answer 2

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

然后悬停：

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

尝试这个。

Answer 3

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