将鼠标悬停在图像上时在图像上显示文本答案

【问题标题】：Show text over a image when hovering over it将鼠标悬停在图像上时在图像上显示文本
【发布时间】：2014-01-26 09:46:32
【问题描述】：

所以我正在做一个项目，我希望在将鼠标悬停在图像上时显示标题。我在 stackoverflow 上搜索过类似的案例，尝试了建议的方法，但还没有实现。

例如，在图片上，当我将光标放在图片上时，我希望显示“营养”的文字。最简单的方法是什么？

我是 Web 开发新手，对 Javascript/JQuery 了解不多

【问题讨论】：

【解决方案1】：

无需 JavaScript；只需使用title 属性：

<img src="/path/to/image/nutrition.png" title="Nutrition" />

title 属性也适用于任何 HTML 元素，因此如果您想在图像的容器上使用它来扩展可悬停区域，您可以。

【讨论】：

【解决方案2】：

http://jsfiddle.net/DerekL/eXTYX/

<img src="pic.png">
<span>TEXT</span>

span{
    display: none;
}
img{
    width: 500px;
}
img:hover ~ span{
    display: inline;
}

这是一种方法。不需要 JavaScript ;)

您甚至可以为其添加动画和过渡：http://jsfiddle.net/DerekL/eXTYX/1/

正如其他人也提到的，您还可以使用title 来显示系统工具提示。这很容易实现，但是，您将无法控制它的显示方式：

<img src="pic.png" title="Easy tooltip!">

【讨论】：

@user3236461 - 你必须更具体地说明“它是如何不工作的”。你能在 JSFiddle 上发布一个例子吗？
@user3236461 - 如果您使用的是 title 工具提示，那么是的，您做对了 ;) 但有一件事我想告诉您 <img> 没有结束标签，并且做<img></img> 是无效的HTML。

【解决方案3】：

在 html 中设置图像时，可以设置标题属性。像下面这样

<img src="happy.gif"  width="10" height="10" Title="I'm happy"/>

这对 SEO 也有好处！

【讨论】：

看起来你实际上并没有尝试多人给出的解决方案，并且给出了相同的“我不知道我做错了什么，但这只是行不通！”。如果它不起作用，请说出原因，并尝试更具体地说明您认为它不起作用的原因！

【解决方案4】：

无需 java 脚本，只需使用 title 查看更多 here

<img src="foo/bar" title="foo" alt="bar">

希望对你有帮助

【讨论】：