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

Question

我想在将鼠标悬停在图像上时显示说明。我已经以一种不太理想的方式做到了这一点，在这里使用了图像精灵和鼠标悬停：我希望它看起来像我拥有的样子，但是使用真实文本而不是图像。

我尝试了几种不同的方法，但似乎无法弄清楚该怎么做。我正在尝试仅使用HTML和CSS进行操作，但不确定是否可行。

随意在我的代码中四处浏览，我将粘贴我认为与之相关的内容。

的HTML

div#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&nbsp; href="buzz.html" title="buzz hover text">您也可以对图片的替代文本执行相同的操作。