在鼠标悬停在图像上时，在图像上显示文本

Question

所以我正在开展一个项目，我希望在鼠标悬停在图像上时显示标题。我已经搜索了stackoverflow以查找类似的情况，尝试了所建议的但还没有让它工作。

例如在图片上，当我将光标放在它上面时，我想要一个文字说“营养”。最简单的方法是什么？

我是网络开发的新手，在Javascript / JQuery方面知之甚少

Answer 1

不需要JavaScript;只需使用title属性：

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

Here is a fiddle

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

Answer 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!">

Answer 3

在html中设置图像时，您可以设置标题属性。如下

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

这对SEO也有好处！

Answer 4

不需要java脚本只需使用title查看更多here

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

希望这有帮助