悬停时如何在图像上显示文本？

Question

我想在将鼠标悬停在图像上时显示说明。我已经以一种不太理想的方式做到了这一点，在这里使用了图像精灵和鼠标悬停：我希望它看起来像我拥有的样子，但是使用真实文本而不是图像。我尝试了几种不同的方法，但似乎无法弄清楚该怎么做。我正在尝试仅使用HTML和CSS进行操作，但不确定是否可行。随意在我的代码中四处浏览，我将粘贴我认为与之相关的内容。的HTMLdiv#projectlist {  width: 770px;  margin: 0 auto;  margin-top: 20px;  margin-bottom: 40px;}div#buzzbutton {  display: block;  float: left;  margin: 2px;  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;  width: 150px;  height: 150px;}div#buzzbutton:hover {  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);  width: 150px;  height: 150px;  background-position: 0 -150px;}div#slinksterbutton {  display: block;  float: left;  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;  width: 150px;  height: 150px;  margin: 2px;}div#slinksterbutton:hover {  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);  width: 150px;  height: 150px;  background-position: 0 -150px;}<div id="projectlist">  <div id="buzzbutton">    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>  </div>  <div id="slinksterbutton">    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>  </div></div>

Answer 1

在您的HTML中，尝试将要出现的文本放在代码的标题部分：

<a  href="buzz.html" title="buzz hover text">

您也可以对图片的替代文本执行相同的操作。