Question

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

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

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

这是我假设的javascript或jQuery？任何人都可以给我一个示例代码，说明我将如何处理这个问题？

Answer 1

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

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

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

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

如何在悬停时显示图片标题文字？

4 个答案: