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

因此，我正在研究一个项目，我希望在鼠标悬停在图像上时显示标题。我搜索了类似的案例stackoverflow，尝试了什么建议，但还没有得到它的工作。当鼠标悬停在图像上时，在图像上显示文字

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

我是网络开发新手，涉及到Javascript/JQuery的知识不多

2014-01-26 ul09lu09

可能重复[CSS帮助 - 在图像DIV（http://stackoverflow.com/questions/8769830/css-help-div-over-image） –

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

2014-01-26 00:23:33

我不知道我在做什么错，但这只是不行！ – ul09lu09

@ user3236461 - 你必须更具体地说明“它不工作”。你可以在JSFiddle上发布一个例子吗？ –

不知道如果我这样做的权利，但这里 - http：// jsfiddle。净/ PCg9P/ – ul09lu09

没有JavaScript需要;只需使用title属性：

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

title属性也适用于任何HTML元素，所以如果您想在图片的容器上使用它来扩展可移动区域，您可以。

2014-01-26 00:22:30 Doorknob

我不知道我在做什么错，但这只是不行！ – ul09lu09

@ user3236461“不起作用”是什么意思？ – Doorknob

当用鼠标悬停在图像上时，什么也没有发生 – ul09lu09

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

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

这对SEO也有好处！

2014-01-26 00:25:16 briank

我不知道我在做什么错，但这只是不会工作！ – ul09lu09

看起来好像你并没有尝试多人给出的解决方案，并给出相同的“我不知道我做错了什么，但这不会工作！”。如果它不工作，说明原因，并尝试更具体地说明为什么你认为它不起作用！ – briank

无需Java脚本只是用title看到更多here

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

希望这有助于的

2014-01-26 00:30:53 apples

回答