如何使文本悬停？ [关闭]答案

【问题标题】：How do I make text hover? [closed]如何使文本悬停？ [关闭]
【发布时间】：2014-02-24 23:35:13
【问题描述】：

http://cdpn.io/jLAJg 当您将鼠标悬停在每张图片上时，有人可以教我如何使文字出现吗？（我只完成了 Codecademy Web 基础课程。我发布的网站基本上是我所知道的关于 Web 编码的全部内容）

【问题讨论】：

嗨，欢迎来到 Stack Overflow。您的帖子存在一些问题，可能会导致它收到一些反对票并被关闭。通常，一个问题应该包含一些代码和尝试的解决方案、共享研究以及为什么您的解决方案不起作用。请参阅how-to-ask 以获得一些帮助。（PS。混淆的链接通常也不会很受欢迎。）

标签： html css web

【解决方案1】：

你可以做这样的事情，这很简单：

（我已将 codepen 更新为具有多个框）

codePen - JSFiddle

HTML：

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

CSS：

.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;
}

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

显然您必须更改文本，但它可以同时用于多个文本。

【讨论】：

+1 仅适用于 CSS，毫无疑问有人会提到 jQuery :)
这是一个小提琴 -jsfiddle.net/timspqr/scp8X/-，它使用了上述所有技术，并添加了 jQuery .hover 和 jQuery .hover 和 .animate。只是建立在上面的优秀答案之上。
@TimSPQR 该链接已损坏。此外，代码已损坏。 :(
好的，现在开始工作。 jsfiddle.net/timspqr/scp8X/1 - 一个讨厌的括号潜入代码:-)

【解决方案2】：

您可以将title 属性添加到您的元素。

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

Demo

如果您想要更多自定义工具提示，可以使用google search，您会发现很多好的 javascript/jquery 示例。

【讨论】：

【解决方案3】：

嗯，一方面，您可以在每张图片上使用title 属性。这样，当您将鼠标悬停在元素上时，将显示带有给定文本的工具提示。

例子：

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

【讨论】：