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

【问题标题】：How to show image title text on hover?如何在悬停时显示图像标题文本？
【发布时间】：2013-10-23 13:18:59
【问题描述】：

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

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

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

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

【问题讨论】：

先向我们展示您的尝试！ :)
这不就是title atttribute 在做什么吗？
title="<?php the_title(); ?>" 将此添加到您的 img 标签中
我没有尝试过任何事情，因为我不知道该怎么做。这些图像的标题类似于“image_1”“image_2”，所以我不确定是不是这样
那么您需要进入并更改媒体库中图像的标题:)

标签： javascript jquery html css wordpress

【解决方案1】：

View-Image 是指向真实图像或全尺寸图像的新链接。哪个可以有图片的标题就这样：

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

这样，您将在链接中显示图片标题..

【讨论】：

【解决方案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 为您动态命名它们，但这不完全是您的问题！

【讨论】：

【解决方案3】：

你可以用 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);
}

【讨论】：

【解决方案4】：

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

然后悬停：

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

试试这个。

【讨论】：