Question

http://cdpn.io/jLAJg 有人可以教我如何在每张照片上悬停鼠标时显示文字吗？（我只完成了Codecademy Web基础课程。我发布的网站基本上都是我对网络编码的了解）

Answer 1

您可以为元素添加title属性。

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

Demo

如果您想要更多自定义工具提示，可以使用google search，找到许多优秀的javascript / jquery示例。

Answer 2

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

（我已将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，因此不需要外部库。

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

Answer 3

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

示例：

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

如何使文字悬停？

3 个答案: