javascript 如何在悬停时显示图像标题文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19386261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show image title text on hover?
提问by George McKenzie
I'm building a basic Wordpress website. This is the demo page I need help with:
我正在构建一个基本的 Wordpress 网站。这是我需要帮助的演示页面：
http://irontemplates.com/wp-themes/ironband/photos/
http://irontemplates.com/wp-themes/ironband/photos/
When mouse is hovered over the image, I want it to show the title of the image before it says "View Image."
当鼠标悬停在图像上时，我希望它在显示“查看图像”之前显示图像的标题。
This is javascript or jQuery I'm assuming? Can anyone give me a sample code of how I would go about this?
这是我假设的 javascript 还是 jQuery？任何人都可以给我一个示例代码，说明我将如何进行此操作？
回答by Afzaal Ahmad Zeeshan
The View-Imageis a new link to the real image, or the full sized image. Which can have the title of the image Just like this:
这View-Image是指向真实图像或全尺寸图像的新链接。其中可以有图像的标题就像这样：
<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..
这样，您将在链接中显示图像标题..
回答by Rohit Paul
var title= $("#imageid").attr("title");
Then on hover:
然后悬停：
$("#imageid").on("hover",function(){
alert(title);
});
Try this.
试试这个。
回答by muiiu
<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>
This is found inside a list element that exists within an unsorted list that holds all of the images for that page.
这是在一个列表元素中找到的，该元素存在于一个未排序的列表中，该列表包含该页面的所有图像。
You need to change what is between the innermost span tags. In this case, it says "VIEW IMAGE", change it to "Image 1" or whatever you want.
您需要更改最里面的跨度标签之间的内容。在这种情况下，它会显示“查看图像”，将其更改为“图像 1”或您想要的任何内容。
You can use Javascript to dynamically name them for you, but that wasn't exactly your question!
您可以使用 Javascript 为您动态命名它们，但这并不是您的问题！
回答by El_boogy
You can do that with JS:
你可以用 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);
Or you can use CSS only
或者你可以只使用 CSS
.ls_input_section_header_gs
{
position: absolute;
top: 15px;
}
.ls_input_section_header_gs a:hover:after {
content: attr(title);
}
