Html 如何使文本悬停？

---

有人能教我当你把鼠标悬停在每张图片上时如何使文本显示吗？（我只完成了Codecademy Web基础课程。我发布的网站基本上是我所知道的关于Web编码的所有内容）

您可以将

title

属性添加到元素中

<img src="something" alt="Hover to see the tooltip!" title="Tooltip!" />

---

如果你想要更多的自定义工具提示，你可以使用，你可以找到很多好的javascript/jquery示例。

首先，你可以在每个图像上使用

title

属性。这样，当您将鼠标悬停在元素上时，将显示具有给定文本的工具提示

例如：

<img src="images/penguin.jpg" alt="Cute penguin">

---

您可以这样做，这非常简单：

（我已将代码笔更新为具有多个框）

-

HTML:

它使用纯CSS，因此不需要外部库

---

显然，您必须更改文本，但它将同时适用于多个文本

+1仅用于CSS，毫无疑问有人会提到

jQuery

：）这里有一把小提琴-它使用了上述所有技术，并添加了jQuery.hover和jQuery.hover和.animate。在上面的优秀答案的基础上再进一步。@TimSPQR，链接已断开。此外，代码已被破坏：（好的，现在开始工作。-一个讨厌的括号潜入代码：-）嘿，欢迎来到堆栈溢出。你的帖子有一些问题，可能会导致它收到一些反对票并被关闭。通常，一个问题应该包含一些代码和尝试的解决方案，共享研究，以及为什么您的解决方案不起作用。请参阅以获得帮助。（注：模糊链接通常也不会受到欢迎。）

<div class="box">
  <a href="http://google.co.uk">Click Me!</a>
</div>

.box{
  background:red;
  width:100px;
  height:100px;
  position:relative;
}

.box:hover a{
  bottom:10px;
  opacity:1;
}

a{
  transition:all .4s;
  -webkit-transition:all .4s;
  background:blue;
  color:#fff;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  opacity:0;
}