悬停在图像上时在图像上显示文字

Question

因此，我正在一个项目中，希望将鼠标悬停在图像上时显示标题。 我已经在stackoverflow上搜索了类似的案例，尝试了建议的内容，但尚未使它起作用。

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

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

Answer 1

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

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

这是一个小提琴 。

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了解更多信息

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

希望这可以帮助